菜单栏，它不在顶部，但是一旦向下滑动，菜单栏就会粘在顶部

Question

I need to make a menu bar like the one in http://showbic.com/sports/adam-milne-vs-west-indies/

In this website the menu_bar is not on the top, but when you scroll down the menu bar doesn't go up with the rest of the content, but after touching the top it stays at the top.

I know some JavaScript is used combined with the CSS, but how I don't know, please someone help me.

Thank You in Advance.

Answer 1

I would advise trying something with onscroll in Javascript and then keeping the header at the top you can use position:fixed; in the container's CSS. (you might want to play around with the top placement or something else to keep it at the very top and in your preferred spot when not needed at the top)

See for example:

<script type="text/javascript">
var fixed = false;

onscroll = function() 
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 200) 
    {
        if (!fixed) 
        {
            $('.navbar-wrapper').css({ position: 'fixed', top : 0 });
            fixed = true;
            }
    } 
    else 
    {
        if (fixed)  
        {
            $('.navbar-wrapper').css({ position: 'relative', top : 200 });
              fixed = false;
        }
    }
}
</script>

Answer 2

When looking into the source code, you can view the javascript part that is controlling this bar. http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8 . Instead of :

$('#alrp-slidebox').animate({'right':'0px'},300);

Put:

$('#yourContent').animate({'top':'0px'},300);

And for (we suppose that the height of the box is 300px):

$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);

Put:

$('#yourContent').stop(true).animate({'top':'-300px'},100);

Answer 3

This can be your css

body{
    height:1000px;
}

div{
width:200px;
    height:100px;
    background:red;
    position:relative;
    top:200px;
}

.fixedClass{
position:fixed;
top:0;
}

the jquery code

$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top 
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})

the Html :P

<div>
</div>

the working fiddle