据我理解,如果带有 position:sticky
属性的元素嵌套在父元素中,当父元素离开视窗时,“粘性”元素也会离开。
在这里,我有一个“粘性”的 <ul>
元素,它位于 <main>
中的 <nav>
中。当通过主要元素滚动时,当 <nav>
通常会滚动到屏幕外时,它的行为与变成 position:sticky
一样。但是,如果我将 <nav>
的 display
更改为 block
或 inline-block
,它的行为就像我最初的想法一样。这是怎么回事?
body {
border: 2px dotted gray;
padding: 2rem;
}
nav {
display: inline;
}
ul {
top: 0;
position: sticky;
width: 100%;
list-style: none;
padding: 1rem 0;
display: flex;
gap: 1rem;
font-weight: bold;
border: 2px dotted gray;
background: white;
}
<body>
<main>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
<h1>Main Heading</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis enim ipsum. Quisque vel lacinia urna. Aenean et cursus nisi. Mauris eleifend fermentum elit, id finibus sem varius id. Duis imperdiet massa at velit ultrices gravida id sit amet ipsum. Praesent convallis quis metus nec dignissim. Etiam et odio id odio tincidunt bibendum quis vel urna. Cras ultricies diam eget nisl posuere, vel mollis sapien venenatis. Nulla eu diam hendrerit, gravida dolor vitae, cursus nulla.</p>
<p>Maecenas vulputate viverra diam elementum volutpat. Sed vulputate ac velit et tincidunt. Mauris eget nisl ut mauris eleifend accumsan. Phasellus accumsan ultricies leo, vitae gravida tellus rutrum sed. Proin condimentum pulvinar rhoncus. Duis quis massa ligula. Cras ac est aliquet, facilisis leo nec, scelerisque arcu. Nunc ultricies sollicitudin semper. Nulla varius laoreet posuere. Suspendisse hendrerit nulla id mi rhoncus iaculis. Donec interdum ultricies risus, eget malesuada justo pellentesque placerat. Cras convallis eget dolor in tempus. Ut imperdiet tellus eu nibh bibendum rutrum.</p>
<p>Integer eros purus, porta non rhoncus a, accumsan et lectus. Ut a ullamcorper purus. Proin mattis fermentum lorem varius mollis. Nullam imperdiet, neque auctor sodales molestie, nulla enim suscipit leo, id cursus nibh quam vel neque. Curabitur mauris nunc, varius id pharetra sed, elementum nec tellus. Morbi luctus auctor egestas. Cras accumsan arcu ullamcorper porttitor imperdiet. Sed semper magna nec nibh venenatis, sed laoreet neque malesuada. Aenean sit amet erat molestie, efficitur lacus vitae, laoreet lectus. Proin elit enim, ultrices nec nibh eget, vehicula maximus odio. Nunc egestas dapibus porta. Mauris aliquet bibendum ultrices.</p>
<p>Praesent efficitur sit amet magna bibendum bibendum. In convallis nisl aliquam vulputate gravida. Praesent ornare pretium dapibus. Aliquam malesuada in metus eget eleifend. Morbi at cursus augue, sed sagittis dolor. Pellentesque facilisis urna metus, et maximus risus tristique et. Cras blandit condimentum pulvinar. Fusce mattis egestas tortor, ut aliquam libero ultrices eu. Praesent mauris enim, egestas id tristique in, mollis in tellus. Integer tristique augue quis lorem facilisis, non convallis lorem consequat. Morbi sagittis at mi ac finibus. Vivamus eget diam nec quam lobortis viverra. Morbi viverra ut odio non vehicula.</p>
<p>Proin faucibus tortor quis nisl placerat, eget commodo ante iaculis. Proin quis aliquam ante, a iaculis nisi. Vivamus porta mi et neque ullamcorper mattis. Suspendisse cursus, urna et placerat posuere, risus arcu tempor nunc, eget hendrerit nulla ex maximus ante. Morbi elit mauris, vestibulum vel elementum et, mattis non quam. Quisque aliquet congue quam, id dictum nunc scelerisque in. Mauris ipsum risus, vestibulum venenatis lorem vitae, porta semper ante. Aliquam eu velit vitae neque iaculis vestibulum id a magna. Integer malesuada at lacus ac vulputate.</p>
</div>
</main>
</body>
<div><div class="sticky">I am sticky!</div></div>
),将具有类sticky
的 div 包装起来,则它将停止像 position: sticky 一样运作。然后,如果您向该包装器 div 添加 display:inline,则它将再次表现为 position: sticky,但父级 "包装器 div" 也会随着它在页面上向下移动。只要所有父级都是display:inline
,您可以多次执行此操作,但如果其中任何一个是display:block
或inline-block
,则它将停止工作。 - Lovethenakedgun