Jquery ScrollTop Manipulation

Jquery ScrollTop Manipulation

本文关键字：Manipulation ScrollTop Jquery      更新时间：2023-09-26

我的else函数有什么问题?

当scrollTop =0时，我试图隐藏注册框，但无法使不透明度工作。宽度的改变会被执行，而不透明度的改变不会(警告会弹出，所以滚动顶部的位置是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);
}

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

关于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的有趣探索。谢谢大家的帮助!!

检查当前动画是否与.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);       
        }   
    });
});
工作JSFiddle

<

Additionnal信息/strong>

你可以传递一个对象给.css() jQuery方法，如果你有几个属性设置，像这样:

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

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

这里的问题是竞争条件。假设用户没有滚动到顶部，然后我们制作动画。如果用户在动画运行时滚动到顶部，.css调用将在那一刻修改style属性，但仍在运行的动画将立即覆盖"不透明度"属性。用。animate代替。css的原因是动画会排队(它们不会运行，直到其他动画完成)。正确的方法是这样做:

$('#sign-up-box').stop().css('opacity', '0.6');
相关文章：