滚动上的jQuery下拉菜单

Question

向下滚动页面时，如何使jQuery顺滑滑动？

就像在此页面上一样： https : //www.behance.net/gallery/8571121/JobEngine-WordPress-Theme-By-Engine-Themes

我正在使用此代码，它可以工作，但是不流畅，没有滑落，只是没有效果而已：

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

Answer 1

尝试将最高值设置为负值并将其设置为0px。

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

观看我的小提琴： http : //jsfiddle.net/mjGRr/

Answer 2

实现此目的的一种方法是，首先保持元素的高度为0px，然后根据需要增加高度。

检查这个小提琴： http : //jsfiddle.net/FuH2p/-我已经使用CSS完成了相同的效果。 我想您将它转换为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;
}

或者 在这里，你去（像这样）

将重复的导航栏固定在高度为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);
        }
    });