Currently I am working on a page that has a top banner followed by a top navigation bar. I am making it so that when you scroll down past the navigation bar - the navigation bar becomes fixed. This works however when the nav becomes fixed, the rest of the website content pushes up as the navigation bar is no longer a block element.
Is there a way to make the navigation bar fixed while retaining the position or content of the page in the same location?
Set the margin-top of the div with the rest of the website equal to the height of the navigation bar + margin-top of the navigation bar (since there is a banner)
What sort of script are you using to switch the positioning of your navigation? I've used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/) with success. Maybe you could use that, or check out how they address your issue. It seems like they add a wrapper around the "sticky element", which prevents the content from shifting.
Related
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
So I have about 8 pages, more or less that I want the user to be able to scroll to each one horizontally. However each one of those 8 pages is also pretty long and needs a vertical scroll bar in each page as well. So when the user uses the horizontal scroll bar they should be able to navigate the different pages, but when using the vertical scroll bar they should be able to just scroll up and down on the page that they're viewing.
I looked at at fullpage.js and sly.js and I'm not really sure which one would be the best to achieve this kind of design. Also if anyone has any other suggestions on how to do this that'd be great too.
If you go for fullpage.js, it doesn't provide any horizontal scroll bar. You can scroll horizontally form one slide to another by using the keyboard arrows or by using any visual element in your site.
fullpage.js provides arrows by default to do so. But you can substitute them for any other element.
Then you can use the option scrollOverflow:true to allow the vertical scrolling within the slides.
I'm working on a responsive website and want to make an overlay menu like on play.google.com.
My layer get's dynamicaly the height of the window to fill the screen from top to bottom and get's "position:fixed" to stay where it is.
I do "window.scroll(0,100)" to vanish the navigation bar. But when I try to scroll inside my menu by touch the whole page scrools up and shows the navition bar again. Then it's no longer possible to scroll the page. The result of this behavior is, that man menu is now to long and the bottom of the menu is no longer visible on the page.
On the google play website they used something that the navigation bar never vanishes and I think this could help to avoid my problem also, but I haven't found out how to do that, yet.
I hope someone of you has some experiance in that.
thanks in advance
Frank
I've got an off-canvas menu, and it's working very well for my Mobile layout.
However, when I expand the menu item to show the submenus under it, the whole page can scroll horizontally. Not so perfect.
I'm just controlling the class name to display: block.
http://dev.martinilab.com/so1/index.html
I'm not sure what is causing the problem.
The problem is that you don't have a height set on .row, so it's as tall as the content forces it to be. When you display:block that class and cause those menu items to be displayed, it forces the content further down, and since the page is as tall as the content, the page gets longer.
If you want to fix it, either set a height for that class or take those menu items out of the document flow so it doesn't push the content down.
I have a jQuery plugin that makes pages dynamic (found here: http://css-tricks.com/dynamic-page-replacing-content/ - Demo here: http://css-tricks.com/examples/DynamicPage)
My nav bar is in the footer (I know this is not generally a good idea but it suits the layout and objective of my website).
When there is not much content on the page, obviously the footer is in view on the window so no action needs to be taken. However, when a longer dynamic page is loaded which requires a scroll bar, the footer is pushed out of the window to make space for the content.
I want the footer to STOP and fix itself to the bottom of the window if the dynamic page creates a scrollbar, essentially so the navigation is always in view.
I've looked at other solutions on this site, but it's all either to permanently stick the footer to the bottom of the window, or only fix to the top when scrolling. I've tried inverting those solution values (i.e. changing top to bottom) but to no avail.
Could anyone help?
wrap in a DIV with overflow auto or scroll