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

Like on this page:

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

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

Like on this page: https://www.behance/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);
        }
    });

• javascript
• jquery

Share Improve this question Follow asked Jun 11, 2014 at 10:54 Augusto TristeAugusto Triste 46177 silver badges88 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/mjGRr/

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

check this fiddle :http://jsfiddle/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);
        }
    });