javascript - jQuery scrollTop 有问题

Question

我正在尝试让子导航菜单在用户从顶部向下滚动 200 像素后为固定位置更改设置动画。它可以工作，但有很多问题，比如当用户滚动回到顶部时，它并不总是返回到原来的位置，等等。我对 javascript/jquery 不擅长，但我认为这很容易做到。我错过了什么？

这是我的观点: http://jsfiddle.net/visevo/bx67Z/

和一段代码:

(function() {
    console.log( "hello" );
    var target = $('#side-nav');
    var scrollDis = 200;
    var reset = 20;
    var speed = 500;
    $(window).scroll(function() {
        console.log( $(window).scrollTop() );
        if( $(window).scrollTop() > scrollDis ) {

            $(target).animate({
                top: reset + 'px'
            }, speed);
        } else {
            $(target).animate({
                top: scrollDis + 'px'
            }, speed);
        }
    });
})();

Answer 1

如果同时使用一点 css 和 jquery 呢？？

我所做的是添加到侧导航的过渡以使其动画化并纠正您的 js 以仅更改它的 css。您可以通过更改过渡时间来设置它移动的速度。

FIDDLE

#side-nav {
    position: fixed;
    top: 100px;
    left: 10px;
    width: 100px;
    background: #ccc;
    -webkit-transition:all 0.5s ease-in-out;
}

(function () {
    var target = $('#side-nav');
    var scrollDis = 100;
    var reset = 20;
    var speed = 500;
    $(window).scroll(function () {
        if ($(this).scrollTop() >= scrollDis) {

            target.css("top", reset);
        } else {
            target.css("top", scrollDis);
        }
    });
})();

注意:当你像这样缓存一个 jQuery 对象时

var target = $("#side-nav");

您不需要在变量周围再次使用 $。