2

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!) ;)

2
  • This is only achievable through the use of JavaScript.
    – Moses
    May 9, 2012 at 17:10
  • FYI, I found a live example of this effect. I recommend digging into it using firebug / developer console to see how they use javascript to create the effect. The website is: movethewebforward.org
    – Moses
    May 9, 2012 at 19:11

2 Answers 2

5

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});           
    }            
});
5
  • I made a modification to your example. Can you tell me why it does not work this way? jsfiddle.net/vWv6M/2
    – seth
    Oct 18, 2012 at 17:01
  • Changing the bar position to fixed makes its width relative to body, so you have to change the width too. Here you go : jsfiddle.net/gabitzish/vWv6M/11
    – gabitzish
    Oct 19, 2012 at 6:04
  • $('#bar')[0] means you return the first #bar ? Jun 23, 2013 at 17:32
  • I'm using that to transform the jQuery object into html element.
    – gabitzish
    Jun 25, 2013 at 15:18
  • That's not vanilla Javascript. It's jQuery.
    – Carlos
    Sep 18, 2013 at 10:31
0

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

1
  • Using only fixed position will cause the menu to stay at top:15px all the time. @davidgnin want's the menu to scroll until the above title is hidden, and then stay fixed.
    – gabitzish
    May 9, 2012 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.