I have a fixed header element which stays fixed to the top of the page when a user scrolls down. I've created this jsfiddle to demonstrate how this looks.
How can I make the content element scroll over the top of the header element instead of scrolling underneath? I tried adding z-index: 99999; to content but this had no effect.
Minor modification: add
z-index:-1;
to header { }
Related
I am trying to create a header which remains fixed at top but what happens is when i scroll down the page the header moves along with it while maintaining its position.
My requirement is that the header shouldn't move with the page as we scroll down.
JS FIDDLE:https://jsfiddle.net/qa5d1ry0/
Note: Its just a dummy code of my layout and i have added random text in order to get the code working
Note: I have tried using position:absolute for header but the problem is that header don't get displayed as we scroll
Try to give position: fixed; to the header and remove the relative position from container.
.header {
position: fixed;
}
Try to add top:0px; after your position:fixed; for the header/heading div.
It's fixed for me. Try position: fixed. What browser are you using?
I'm currently in the middle of experimenting with creating web pages and have come across a problem when trying to make a fixed navigation bar to the top of a web page while scrolling.
I'm able to get the navigation bar fixed to the page using
position:fixed;
but, the problem i'm having is the content below the nav bar (Main content) is pushing to the top of the page instead of staying directly underneath my fixed nav.
I've tried using margins to correct this problem, but doesn't seem to be working.
Thanks in advance
When you use position:fixed you removed the affected element from the actual flow of the document.
The quickest and most effective work around is to wrap your content in a div and displace it from the top of the page by the same amount as your nav...
<div class="fixed">my nav stuff</div>
<div class="my-pushed-content">my content is here</div>
css:
.fixed {
position:fixed; height: 50px;
}
.my-pushed-content {
position: relative //or absolute depending on your needs
top: 50px;
}
Hope this helps!
I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website
First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.
I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.
Is there a way I can offset where the page navigation shows up by 80 pixels (down)?
Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.
Well, since no one else had an answer, I fixed it myself.
Here is the fix:
JSFiddle
This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.
You can do that with CSS.
HTML:
<header>Your Header Here</header>
<div id=main>Rest of Content</header>
CSS:
header { position: fixed; height: 80px; }
#main { margin-top: 80px; }
Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.
The example doesn't show how it works. I fixed it by adding:
#header {
opacity:0.5;
}
#content-scroller {
height:120px;
}
I want the footer to always be at the bottom of the page even if the content doesn't push it all the way down. How can I make it just stay at the bottom of the page?
#footer { position: fixed; bottom: 0; }
If you always want it to be at the bottom of the visible page even when the content pushes down further than the viewable area try absolutely positioning the div and adding a margin to the bottom of your page.