CODEWITHSUNDEEP
htmlcss
Edward Ramirez
Edward Ramirez

Reputation: 23

How to fix: sticky position behaving like fixed?

I am working on a sample website for a possible client and I have gotten this to work before but can't replicate it. Basically, I have the title div which is the blue box, I have the header/menu bar which should be right under it. And finally, I have the large image resembling the rest of the website that is below the header. I want the menu bar/header to (when the site loads) begin positioned just below the Title div. And as you scroll down to browse the website it moves up until it reaches the top of the site and then it works as a fixed position, preferably I'd like to accomplish this using the CSS position: sticky;

What I have in the following script in the CSS seems to make the header act as a fixed position rather than anything else. Even if I offset it using top: 90px; I have tried having a div surround the entire page except for the title and placing the header inside to use as a sort of container, didn't work. I've tried not using an encompassing div at all. Nada...

CSS:

#sticky {
position: sticky;
background: orange;
top:90px;
z-index: 50;
width: 100%;
height:50px;
}

HTML:

    <body>
    <div id="title">
    </div>
    <div id="sticky">
    <ul id="ulHeader">
    <li>Home</li>
    <li>Menu</li>
    <li>Find Us</li>
    <li>Contact Us</li>
    </ul>
    </div>

    <div id="image">
    <img src="images/tacos.jpeg">
    </div>

I don't receive any error messages and I expect, using this code, for the header/menu bar to begin 90px from the top of the page and as you scroll for it to get stuck at the top once you scroll far enough. Unfortunately what ends up happening is the header simply stays 90px from the top consistently like a fixed element.

Upvotes: 2

Views: 2944

Answers (1)

Shaurya Vardhan Singh
Shaurya Vardhan Singh

Reputation: 684

Update the top to be 0px so that it sticks at top of the page

#sticky {
position: sticky;
background: orange;
top:0px;
z-index: 50;
width: 100%;
height:50px;
}

You can also have a look at this example

Upvotes: 1

Related Questions