I am making this website: http://charlottebrand.nl/BFA/index.html
As you can see the design is made so that the word 'ARENA' is being cut off at the top and bottom of each section.
What I want is this: when you scroll up past the top (this elastic effect of the browser is triggered) you'll be able to see the whole word 'ARENA' instead of it being cut off, as it is now.
I've tried to give the body more padding, open the page at the right height and then added a snap scroll to create the elastic effect, but all in vain. It's always too glitchy! I feel like there should be a simple solution. Something in the line of rubber band scroll?
Help is much appreciated!
PS Here you can see my latest try: http://charlottebrand.nl/BFA/index2.html
Related
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
Got a strange layout problem on my website. This only occurred in responsive and only on an article page. On the start page everything is fine, but when i open an article and watch it on my phone or the responsive-emulator from chrome developer-tools, i can scroll to right.
I tryed to debug this, watch the dom-highlighter from the dev-tools but i cant find a reason why there its possible to scroll to right. The insepector shows me no margin or padding.
Startpage: https://pokefans.online
Article-Page: https://pokefans.online/artikel/kyogre-leichter-zu-fangen-mit-neustem-update/434/
Really appreciate for your help.
The one causing the issue is the .article_trainer_row, particularly the .article_traier_text as it has a fixed width of 335px.
Using width:100% should fix it. (maybe with a max-width so it doesn't go bananas on higher resolution)
There is a div. In this div has a chat. This div has scroll bar. I want to take a screenshot of all this div content at once. I almost did it by changing the div height to 500% and overflow: visible, but I got a problem. In fact I got about a large part of the chat in the screenshot, but at some point the chat just disappeared with a long white space till the end of the image as shown below.
I took this screenshot using the Firefox's "Screenshot node" feature. And I tried all possible extensions you can imagine before it and none worked (they don't detect the div scroll, just the main page scroll). Anyways, I want a HTML/CSS solution if possible. I want to understand why it is not working.
As you can see, there a lot of white space, but there is a lot of more chat that was ignored by the print.
What could have happened?
You can use FastStone Capture if you want to get a screenshot of a scrolling window or anything with scroll bars. Use the Capture Scrolling Window <Ctrl + Alt + PrtSc> in manual mode.
I’m working on this website for a client: http://alsite2.stackinjb.com.au/. They want to add ‘skins’ or 'wings' to some pages, as you can see here: https://www.jbhifi.com.au/
If you look at the JB Hi Fi website, you’ll notice that when you scroll down, the top of the ad fixes to the top of the screen. On my site, I can’t seem to make this work.
Any help on how to make this work would be much appreciated.
Cheers
You need some javascript for this. Every time the page is scrolling, you have to check the scroll position against the position of the sticky element. If the scroll position bigger than the position of the sticky element, make it sticky.
Check out Waypoints, this is a nice library for such things.
I think that this is a really simple question but I can´t get a solution by myself.
I have a fixed navigation bar in Bootstrap 3 and when I click in one of the nav items it scrolls down to the section with the proper ID. However, it goes all the way until the very beginning of the text. I would like to give it a little bit of space (padding) on top of the text, so i tis easier to read.
This is an example of what I am saying.
However, I would like it to scroll down until the start of the section, including the padding space I have. Like this:
So basically if I could set the menu to navigate to around 20 or 30px on top of the section that would be perfect, because I don´t want to add more padding or margins since that would put too much white space in the site when you are manually scrolling.
I think the section with the proper ID has margin-top: x, change it on padding-top: x. It should work.
I use a jQuery plugin to handle this offsetting of position. Check out Animated Scroll on github.
I don't have all the code to hand, but I use this to kick it off:
$('.btn--scroll-down').click(function () {
$(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
});
If you read the docs, you'll notice an option for padding - that's your offset.