Question

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

这是我的fidde： 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");

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

Answer 2

由于我在整个地方发表评论，我应该提供答案。

问题是每次滚动时都会添加滚动事件，这会导致更多滚动，这会导致更多滚动事件，从而导致无限循环。虽然取消之前的事件将解决问题，但只有在通过阈值IE时触发事件才更清晰：

(function () {
    console.log("hello");
    var target = $('#side-nav');
    var scrollDis = 200;
    var reset = 20;
    var speed = 500;
    var passedPosition = false;
    var bolMoving = false;
    $(window).scroll(function () {
        if (bolMoving) return; // Cancel double calls. 
        console.log($(window).scrollTop());
        if (($(window).scrollTop() > scrollDis) && !passedPosition) {
            bolMoving = true; // 
            $(target).animate({
                top: reset + 'px'
            }, speed, function() { bolMoving = false; passedPosition = true; });
        } else if (passedPosition && $(window).scrollTop() <= scrollDis) {
            bolMoving = true;
            $(target).animate({
                top: scrollDis + 'px'
            }, speed, function() { bolMoving = false; passedPosition = false; });
        }
    });
})();

http://jsfiddle.net/bx67Z/12/

Answer 3

http://jsfiddle.net/bx67Z/3/

我刚刚在.stop()前添加了.animate()，而且效果已经好了很多。

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

您也可以使用.stop(true)

http://jsfiddle.net/bx67Z/5/

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

您也可以使用.stop(true, true)

http://jsfiddle.net/bx67Z/4/

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

因此.stop(true)运行良好的原因是它清除了动画队列。你的原因是“越野车”是因为在每个卷轴上动画队列都“冒泡”，因此它需要很长时间才能达到滚动回到原始位置的程度。

有关.stop()的信息，请参阅此处http://api.jquery.com/stop

jQuery scrollTop是越野车

3 个答案: