javascript - Jquery ScrollTop 操作

Question

我的 else 函数有什么问题？

我尝试在 scrollTop =0 时隐藏注册框，但无法使不透明度起作用。宽度更改被执行，而不透明度更改没有执行(警报确实弹出，因此 scrolltop 位置为 0)。

很想听听 Jquery 大师的一些见解。谢谢!!

$(window).scroll(function(){
    if( $(window).scrollTop() !== 0 ) {
            $('.sign-up-box').animate({
                right: '100px',
                opacity: 1
            }); 
    } else {                        
        $('.sign-up-box').css('opacity', '0.6');
        $('.sign-up-box').css('width', '300px');
        alert("scrolltop = 0");
    }
});

这是供引用的html:

<div class="list-group sign-up-box">
    <a href="#" class="list-group-item active">
    <span class="glyphicon glyphicon-check"></span>
    <h4 class="list-group-item-heading pull-right">Sign up to our email list</h4>
    </a>
</div>

这是供引用的css:

.sign-up-box {
    position: fixed;
    right: -250px;
    bottom: 100px;
    width: 250px;
    z-index: 4;
    opacity: 0;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

Answer 1

我对这个问题做了更多研究，发现我的 CSS 不工作的原因是因为在我们滚动页面时 .animate 被连续调用(因此 .animate 不断更新和运行)因此动画覆盖了 css 更改(与吉米所说的相同)。我也尝试使用 .stop().animate 并且只有当我等待足够长的时间让旧动画完成时它才有效。否则，如果我快速向下滚动并返回顶部，则会发生覆盖，并且我看不到动画有任何变化。

关于 David 的解决方案，存在 1 个潜在缺点，即 .animate 被多次调用。我做了一些调整并提出了以下优化解决方案:

        $(document).ready(function() {

            // Keep track of previous scroll position.
            var previousPosition = 0;
            $(window).scroll(function() {

                // If user is scrolling down.
                if($(window).scrollTop() > 40) {

                    // And user is coming from the top.
                    if(previousPosition <= 40) {

                        //Then animate.
                        $('.sign-up-box').animate({
                            right: '100px',
                            opacity: 1
                        }, 400);

                    }
                } else {

                    // If user is scrolling from the bottom.
                    if(previousPosition > 40) {

                        // Then animate.
                        $('.sign-up-box').stop().animate({
                            right: '-200px',
                            opacity: 0
                        }, 400);
                    }
                }

                // Update previous position.
                previousPosition = $(window).scrollTop();
            });
        });

关于 JQuery 中的 .animate 的探索多么有趣。谢谢大家的帮助!!!