Question

我有这个代码使标题和标题中的img在向下滚动时缩小。它工作正常，但它真的是跳跃，因为一个css属性在另一个之前改变。有没有办法同时进行两种更改？

$(window).scroll(function() {
    if ($(this).scrollTop() > 0){  
        $('#section-header-0').css({
           'line-height' : '44px'
        });

        $('#logo').css({
           'width' : '200px'
        });
    }
    else{
        $('#section-header-0').css({
           'line-height' : '96px'
        });

        $('#logo').css({
           'width' : '394px'
        });
    }
});

Answer 1

$(window).scroll(function() {
    if ($(this).scrollTop() > 0){  
        $('#section-header-0').css({
           'line-height' : '44px'
        },{ duration: 200, queue: false });

        $('#logo').css({
           'width' : '200px'
        },{ duration: 200, queue: false });
    }
    else{
        $('#section-header-0').css({
           'line-height' : '96px'
        },{ duration: 200, queue: false });

        $('#logo').css({
           'width' : '394px'
        },{ duration: 200, queue: false });
    }
});

我希望以上内容可以帮助你排队：false基本上告诉他们一次运行而不是在一行或队列中

Answer 2

您好请尝试使用此链接以获得解决方案的好主意。

Change CSS element with JQuery when scroll reaches an anchor point

从链接复制。

var t = $("#anchor-point").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
        $('#voice3').css({"border-bottom":"2px solid #2e375b"});
    }
});

希望这有帮助

如何使用jQuery同时使多个元素上的不同css属性发生变化

2 个答案: