How to let the elements in the page go under the sticky navbar when scrolling down and not above it and hide it ?
I copied the code from w3 schools to my Angular project but when i scroll down, all the elements go above the navbar and it hides it.
You need to probably add a z-index to the navbar to make it present on the foremost layer of the screen.
Have a look at this link for a much deeper information on the same.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
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 have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
I placed a sticky navigation on my page which should always be visible on front. When you scroll down on page 2 of my site you'll find out that the navigation is placed behind some other buttons.
Could someone please help me with placing it always on the front?
This is the url of page 2 of my site: http://kmnew.kadushimarketing.com/index.php#targetAnchorPage2
Just scroll down and you'll see what I mean.
Solved! I set the z-index to 999999.
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want