css - How to "fixed" menu only when it get to the top?

Question

I want my top menu to be fixed and scroll with the page, but only when it get to the top of the screen. Like here: http://en.miui.com/forum.php

anybody knows how?

tnx :)

Answer 1

Either uses CSS' position:sticky with browser vendor prefixes or check the window's scrollTop when the element touches the top of the window and at the scrollTop or anything larger than it, fix the element with fixed positioning.

On scroll, when the scrollTop is less, give it relative positioning.

In jQuery:

$(window).on('scroll', function(){
    // instead of 180 use the scrollTop when the element touches the top of the window
    if($(window).scrollTop()>=180){
        $(element).css('position', 'fixed');
    }
    else $(element).css('position', 'relative');
});

To check the number you want to use instead of 180, scroll to the point where the element touches the top, go into the developer console and type $(window).scrollTop() this should give you the number you are looking for.