在页眉下的scoll上添加阴影

Question

我有一个这样的标题：

.header-wrapper {
padding: 32px 24px 0 24px;
display: flex;
position: sticky;
top: 0;
z-index: 3;
background-color: $color-white;
}

<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Customers</h2>
</header>

header-wrapper类如上所述编写，并且不能更改。它必须具有display:flex;属性，否则某些元素会中断。

我需要的是：滚动一点后，在标题下出现一个阴影。我该怎么做？(如果我不使用display:flex，它可以工作。但我需要使用它(

提前感谢！

Answer 1

与@Fuzion相同，但使用了香草Js。在窗口上添加CCD_ 5。这在每次用户滚动时给我们CCD_ 6值。

检查scrollY是否为greater，然后检查10add是shadow的我的class，如果不是remove是shadow的我的类

window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
if (scroll > 10) {
document.querySelector(".header-wrapper").classList.add("shadow");
} else {
document.querySelector(".header-wrapper").classList.remove("shadow");
}
});

.header-wrapper {
padding: 32px 24px 0 24px;
display: flex;
position: sticky;
top: 0;
z-index: 3;
background-color: #eee;
}
.shadow {
-webkit-box-shadow: 0 14px 12px -6px grey;
-moz-box-shadow: 0 14px 12px -6px grey;
box-shadow: 0 14px 12px -6px grey;
}
.wrapper {
height: 200vh;
}

<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Customers</h2>
</header>
<div class="wrapper">
</div>

Answer 2

您可以通过jQuery滚动功能来实现这一点。我创建了这个小演示，样式可能与您的不同，只需确保JavaScript中的类是正确的！

一旦你向下滚动200像素，阴影就会被添加。如果您想使滚动距离变大或变小，可以在scroll_distance = 100处更改值

注意：我把标题变成灰色只是为了测试目的，所以现在更容易看到。

$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var scroll_distance = 100;
if (scroll >= scroll_distance) {
$(".header-wrapper").addClass("one-edge-shadow");
}
if (scroll <= scroll_distance) {
$(".header-wrapper").removeClass("one-edge-shadow");
}
});
});

.header-wrapper {
padding: 32px 24px 0 24px;
display: flex;
position: sticky;
top: 0;
z-index: 3;
background-color: #eee;
transition: box-shadow 0.3s;
}
.one-edge-shadow {
-webkit-box-shadow: 0 14px 12px -6px grey;
-moz-box-shadow: 0 14px 12px -6px grey;
box-shadow: 0 14px 12px -6px grey;
}
.wrapper {
height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-wrapper">
<h2 data-qa="customersTitle" class="header-label">Customers</h2>
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>