CODEWITHSUNDEEP
javascriptcss
dgnin
dgnin

Reputation: 1597

Bar fixed on top, but only if the scroll tries to hide it

I have a menu on the highest zone of my web, but not on the top. I want that when the user scrolls the page it stays on the top, but only when it would disapear instead. If the title is visible i want the menu under it, on an apparent static position.

Is it possible without javascript, only with css? I see it on a website, but I don't remeber where.

Thank you in advance (and sorry for my ugly english!) ;)

Upvotes: 2

Views: 4266

Answers (2)

adedoy
adedoy

Reputation: 2273

I'm not sure but I've seen this type of thing on many site. One on 9gag.com

Anyway, you can use the position property of the css.

like this one: JSFiddle

#scroll-me{ 
    width:100%;
     height:100px; 
     background:#333;
     position: fixed;
     top:15px;
     }

The position:fixed with top:15px of the scroll-me div makes it always 15px on top

Upvotes: 0

gabitzish
gabitzish

Reputation: 9691

I think this is what you are looking for: https://jsfiddle.net/QuVkV/2/

Here html structure:

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is the menu bar</div>
    </div>
    <div id='lower'>This is some content lower than the menu bar</div>
</div>

This is the css :

#wrapper {
    width: 100%;
    height: 2000px;
}

#upper {
    width: 100%;
    height: 100px;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
}

And here is the javascript :

$(document).on('scroll', function(){
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){
        $("#bar").css({position: "fixed", top:0});            
    }
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
        $("#bar").css({position: "static", top: 0});           
    }            
});

Upvotes: 5

Related Questions