Menu Bar, which is not at the top, but once you slide down the menu bar sticks to the top

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.

http://www.outyear.co.uk/smint/ BTW: https://www.google.com/webhp?tab=ww&ei=PhvdUrSVNYuutQb0iYHABQ&ved=0CBcQ1S4#q=jquery+scroll+sticky+menu — gearsdigital, Jan 20 '14 at 12:47
And if you use SMINT, feel free to drop a message on twitter @rabmyself! — Anup, Jan 20 '14 at 12:49
http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll — Progrower, Jan 20 '14 at 12:49
You already found an example, why don't you just copy that and modify? — Kuzgun, Jan 20 '14 at 12:50

score 2 · Answer 1 · answered Jan 20 '14 at 13:14

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>

score 1 · Answer 2 · answered Jan 20 '14 at 12:55

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

score 1 · Answer 3 · answered Jan 20 '14 at 13:28

1

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

answered Jan 20 '14 at 13:28

Green Wizard

3,507
4
18
29

Thank You everyone for your time and replies, but I meant how to do it in pure javaScript, does anyone know how to do it in pure javascript ? – Bangash Jan 20 '14 at 20:13

Menu Bar, which is not at the top, but once you slide down the menu bar sticks to the top

3 Answers3