Question

我的其他功能有什么问题？

我在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的变化（与Jimmy所说的相同）。我也尝试过使用.stop（）。animate，只有当我等待足够长时间才能完成旧动画时才能使用。否则，如果我快速向下滚动并返回顶部，则会发生覆盖，我会看到动画没有变化。

关于David的解决方案，有一个潜在的缺点，即.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的有趣探索。谢谢大家的帮助！

Answer 2

检查动画当前是否正在运行.is(':animated')，并让你的jQuery如此：

jQuery(function($) {

    $(window).scroll(function(){

        if($(window).scrollTop() > 0) {
            if(!$('#sign-up-box').is(':animated')) {
                $('#sign-up-box').animate({
                    right: '100px',
                    opacity: 1
                }, 1500);     
            }
        } else {                       
             $('#sign-up-box').animate({
                 right: '-250px',
                 opacity: 0
             }, 1500);       

        }   

    });

});

Working JSFiddle

Additionnal infos

如果要设置多个属性，可以将对象传递给.css() jQuery方法，如下所示：

$(this).css({
    opacity: 0,
    color: '#FF0000'
});

对于一个属性，您可以使用较短的版本：$(this).css('opacity', '0');。

Answer 3

这里的问题是竞争条件。假设用户没有滚动到顶部，我们动画。如果用户在动画运行时滚动到顶部，则.css调用将仅修改样式属性，但仍在运行的动画将立即覆盖“不透明度”属性。用.animate替换.css的原因是动画排队（它们在其他动画完成之前不会运行）。正确的方法是这样做：

$('#sign-up-box').stop().css('opacity', '0.6');

Jquery ScrollTop操作

3 个答案: