CODEWITHSUNDEEP
javascriptjquery
Augusto Triste
Augusto Triste

Reputation: 461

jQuery slidedown menu on scroll

How can i have a smooth slide down jQuery when I scroll down the page?

Like on this page: https://www.behance.net/gallery/8571121/JobEngine-WordPress-Theme-By-Engine-Themes

I am using this code, it works but it's not smooth, it's not sliding down, it just appears with no effect:

var bar = $('div.navbar');
    var top = bar.css('top');
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) {
            bar.stop().addClass('navbar-fixed-top').animate({'top' : '0px'}, 500);
        } else {
            bar.stop().removeClass('navbar-fixed-top').animate({'top' : top}, 500);
        }
    });

Upvotes: 2

Views: 6301

Answers (2)

lukkysam
lukkysam

Reputation: 188

try to set the top value negative and animate it to 0px.

bar.stop().addClass('navbar-fixed-top').css('top','-50px').animate({'top' : '0px'}, 500);

watch my fiddle: http://jsfiddle.net/mjGRr/

Upvotes: 4

bhavya_w
bhavya_w

Reputation: 10137

One way of Accomplishing this is by first keeping the height of the element 0px and then increasing the height as required.

check this fiddle :http://jsfiddle.net/FuH2p/ - I have done the same effect using css. I guess you have wont be having any trouble converting it to javascript!!!

HTML

<div class="outer">
    <div class="inner">
        <div>
</div>

CSS

.outer{
    widht:100%;
    height:300px;
    background:#ddd;
    border:5px solid #343434;
}

.inner{
    position:relative;
    top:0px;
    width:100%;
    height:0px;
    background:green;
    -webkit-transition:all .4s ease-in-out;
}

.outer:hover > .inner{
    height:30px;
}

OR here you go ( something like this)

keep a duplicate nav bar fixed on top with height 0px;

.duplicateNavbar{
   display:fixed;
   top:0px;
   height:0px;
}

    $(window).scroll(function() {
        if($(this).scrollTop() > 100) {
            $('.duplicateNavbar').animate({'height' : '56px'}, 500);
        } else {
            $('.duplicateNavbar').animate({'height' : '0px'}, 500);
        }
    });

Upvotes: 0

Related Questions