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

滚动时jQuery slidingown菜单

2 个答案: