如果我有一个在 CSS 中设置postion:sticky;的导航栏，我想在它"粘"到容器顶部时为其添加更多样式。从本质上讲，以下代码重现了我想要的行为，但是我想知道是否只有 CSS 才能实现相同的行为。
const minScroll = $('.navbar').position().top;
$('.container').on('scroll', e => {
let y = e.target.scrollTop;
if (y > minScroll) {
$('.navbar').addClass('navbar-shadow');
} else {
$('.navbar').removeClass('navbar-shadow');
}
});.container {
position: relative;
height: 180px;
border: 1px solid black;
overflow: auto;
}
.navbar {
position: sticky;
background-color: #ddd;
padding: 0.3em 0.5em;
z-index: 100;
top: 0;
transition: 300ms linear all;
}
.navbar-shadow {
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
Navigation bar
</div>
<p>
Etiam phasellus eget. Adipiscing odio lobortis. Vestibulum ac lacus. Est fermentum penatibus. Eu sit hendrerit. Sed laborum vestibulum. Vivamus faucibus non. Parturient et ut sit turpis nulla fringilla vitae purus penatibus in dolor faucibus tincidunt vestibulum dictumst in lobortis facilisis ac porta. Quisque sed libero sem vestibulum sed donec eros sociis. Sed erat elit elementum etiam lacus montes id adipiscing.
Nec lobortis dolor rutrum commodo proin aliquet taciti varius nec pellentesque in. Molestie pulvinar a sodales sit tortor. In elit laoreet amet id tellus tincidunt risus elit mauris eu odio in consequat lacus amet cursus et ante vestibulum suspendisse elementum commodo sed. Facilisi inceptos nonummy duis nec diam. Arcu quis accumsan morbi id sapien wisi praesent platea. Proin faucibus pretium massa ut facilisi. Velit dignissim pede. Enim dolor donec sed dignissim vel. Libero porta consectetuer. Malesuada viverra nec. Rutrum pellentesque pellentesque vitae per praesent aenean vehicula ligula. Et viverra in. Quis enim in. Sed mi metus. In velit eget. Class hac eros. Ut torquent maecenas. Tellus felis diam nibh sed purus. Vestibulum sit urna lacus ac tortor etiam id mattis. Ea lorem venenatis mauris inceptos sed. Vestibulum aliquip tempor ut lorem lacus feugiat curabitur feugiat mauris nec aliquet duis et amet egestas aptent libero augue massa leo et ac aliquam. Convallis purus accumsan. Aliquam elementum fermentum sit hac est. Sit pellentesque curabitur. Nibh ligula vestibulum. Sed curabitur aenean sint mauris risus condimentum nostra in. Ultricies vulputate id. Cras ornare non. Iaculis mauris praesent. Lobortis rutrum velit. Nulla nibh et. Enim libero pellentesque viverra ac cursus. Ut massa condimentum. Neque lobortis suspendisse sodales eget aenean orci ipsum quaerat. Metus adipiscing montes.
Ut nec sed nulla condimentum quis. Fusce odio bibendum gravida ut eu mauris pede ac. Etiam adipiscing vero gravida amet sunt. Dui vulputate lacus in diam quis. Volutpat nec nam.
</p>
</div>
</div>这只能用CSS来完成吗？
一个想法是在另一个div 上制作阴影，你也使阴影粘稠。诀窍是新的div 将位于导航栏后面，粘性行为将在需要时使其出现。唯一的缺点是您需要知道导航栏的高度才能正确设置新div的top值
.container {
position: relative;
height: 180px;
border: 1px solid black;
overflow: auto;
}
.navbar {
position: sticky;
background-color: #ddd;
padding: 0.3em 0.5em;
z-index: 100;
top: 0;
}
.shadow {
height: 10px; /* Bigger enough to have the same shadow */
margin-top: -20px; /* Hide me !*/
position: sticky;
top: 18px; /* This is the best value in our case considering the navbar*/
z-index: 5; /* Lower z-index */
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
Navigation bar
</div>
<div class="shadow"></div>
<p>
Etiam phasellus eget. Adipiscing odio lobortis. Vestibulum ac lacus. Est fermentum penatibus. Eu sit hendrerit. Sed laborum vestibulum. Vivamus faucibus non. Parturient et ut sit turpis nulla fringilla vitae purus penatibus in dolor faucibus tincidunt
vestibulum dictumst in lobortis facilisis ac porta. Quisque sed libero sem vestibulum sed donec eros sociis. Sed erat elit elementum etiam lacus montes id adipiscing. Nec lobortis dolor rutrum commodo proin aliquet taciti varius nec pellentesque in.
Molestie pulvinar a sodales sit tortor. In elit laoreet amet id tellus tincidunt risus elit mauris eu odio in consequat lacus amet cursus et ante vestibulum suspendisse elementum commodo sed. Facilisi inceptos nonummy duis nec diam. Arcu quis accumsan
morbi id sapien wisi praesent platea. Proin faucibus pretium massa ut facilisi. Velit dignissim pede. Enim dolor donec sed dignissim vel. Libero porta consectetuer. Malesuada viverra nec. Rutrum pellentesque pellentesque vitae per praesent aenean
vehicula ligula. Et viverra in. Quis enim in. Sed mi metus. In velit eget. Class hac eros. Ut torquent maecenas. Tellus felis diam nibh sed purus. Vestibulum sit urna lacus ac tortor etiam id mattis. Ea lorem venenatis mauris inceptos sed. Vestibulum
aliquip tempor ut lorem lacus feugiat curabitur feugiat mauris nec aliquet duis et amet egestas aptent libero augue massa leo et ac aliquam. Convallis purus accumsan. Aliquam elementum fermentum sit hac est. Sit pellentesque curabitur. Nibh ligula
vestibulum. Sed curabitur aenean sint mauris risus condimentum nostra in. Ultricies vulputate id. Cras ornare non. Iaculis mauris praesent. Lobortis rutrum velit. Nulla nibh et. Enim libero pellentesque viverra ac cursus. Ut massa condimentum. Neque
lobortis suspendisse sodales eget aenean orci ipsum quaerat. Metus adipiscing montes. Ut nec sed nulla condimentum quis. Fusce odio bibendum gravida ut eu mauris pede ac. Etiam adipiscing vero gravida amet sunt. Dui vulputate lacus in diam quis. Volutpat
nec nam.
</p>
</div>
</div>