jquery - 从顶部滚动时使背景颜色向上/向下淡化

Question

我有一个固定在页面顶部的菜单条，当您从顶部滚动 50 像素时，会向其添加一个类 - 这反过来会改变颜色。当您回到顶部时，反之亦然。

目前它只是在距离顶部 50 像素时添加一个类 - 这在视觉上会导致颜色在一个或另一个之间闪烁。

有没有办法在您从顶部点击 50 像素时从一个淡入另一个淡入淡出，然后在向上滚动页面时反转该过程？

这是我的代码:

// Change menu colour when it moves from the top of the page
$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".headerStrip").addClass("activated");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $(".headerStrip").removeClass("activated");
    }
});

.headerStrip{
background:rgba(239, 239, 239, 0.5);
padding:0;
position: fixed;
width: 100%;
z-index: 9999;
}
.activated {
background:rgba(239, 239, 239, 0.9);    
}

Answer 1

您可以在您的 css 中添加 transition 属性。

并且在您的 JQuery 代码中仅更改背景属性。

示例

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".headerStrip").css("background","rgba(239, 0, 0, 0.5)");
    } else {
       $(".headerStrip").css("background","rgba(239, 239, 239, 0.5)");
    }
});

.headerStrip{
background:rgba(239, 239, 239, 0.5);
padding:0;
position: fixed;
width: 100%;
z-index: 9999;
transition:background 2s;
}
.activated {
background-color:red;    
}

.body{
height:4000px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headerStrip">
  test
</div>
<div class="body"></div>