我在使用粘性位置时遇到了同样的问题。
例如
1)第一种场景，Sticky position在这个场景下起作用。
<div class=">
<div class="">sticky position</div>
<div class="">some content</div>
</div>
2) 次要场景，粘性位置在此不起作用，因为我添加了父 div。那么有没有其他方法可以用粘性 div 的父类来处理这个问题？
<div class=">
<div class=""><div class="">sticky position</div></div>
<div class="">some content</div>
</div>
3) 第三种情况，如果粘性位置在第一部分，它只对第一部分有效。如果第二部分需要相同的粘性位置怎么办？
<section>
<div class="">sticky position</div>
<div class="">some content</div>
</section>
<section>
<div class="">some content</div>
</section>
我尝试了前两个 senario
第一个senario
.positionSticky {
position: sticky;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}<div>
<div class="positionSticky"></div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>第二个场景
.positionSticky {
position: sticky;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}<div>
<div>
<div class="positionSticky"></div>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>使用@Jake 回答后
#height_100vh {
height: 100vh;
}
.positionSticky {
position: sticky;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}
.ps-dad {
display: inline;
}<section id="height_100vh">
<div class="container">
<div class="ps-dad">
<div class="positionSticky"></div>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">第一个场景有效。我需要解决第二种情况和第三种情况。 你能帮我解决这个问题吗？
最佳答案
第一个解决方案:将所有 div(.container)的父级设置为 display: flex:
.container {
display: flex;
}
.positionSticky {
position: sticky;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}<div class="container">
<div>
<div class="positionSticky"></div>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>方案二:将.positionSticky的parent设置为display: inline;
.ps-dad {
display: inline;
}
.positionSticky {
position: sticky;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}<div class="container">
<div class="ps-dad">
<div class="positionSticky"></div>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa sapien
sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit, tellus
vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci id libero.
Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum laoreet
tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>第三种解决方案:将.positionSticky设置为position: fixed;而不是sticky
#height_100vh {
height: 100vh;
}
.container {
margin-top: 50px;
}
.positionSticky {
position: fixed;
top: 50px;
background-color: #ff0000;
width: 200px;
height: 200px;
}<section id="height_100vh">
<div class="container">
<div class="ps-dad">
<div class="positionSticky"></div>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nibh, faucibus tristique massa
sapien sed augue. Quisque eros sapien, facilisis ac magna a, interdum ornare nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem ut ex egestas, vitae interdum metus imperdiet. Integer finibus, urna quis rutrum pretium, leo leo sodales nib</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui tempor, maximus quam eu, molestie velit. Curabitur porttitor mollis velit in suscipit. Phasellus elit leo, posuere ut est eu, fringilla aliquet tortor. Aenean blandit,
tellus vitae mollis vulputate, risus erat pulvinar dui, eget pulvinar eros libero non ex. Quisque mauris ex, placerat et laoreet a, tincidunt a ipsum. Nam convallis, ante ut porta luctus, arcu ligula consequat orci, scelerisque porta magna orci
id libero. Praesent a mi ut quam dapibus dignissim. Quisque commodo eu magna et bibendum. In pharetra dui et pretium lobortis. In mauris nisi, feugiat quis mi id, molestie mattis quam. In hendrerit vel erat ut malesuada. Fusce magna eros, condimentum
laoreet tincidunt eget, luctus eget odio. Integer pellentesque ornare lacus eget sagittis. Nullam semper lorem</p>
</div>
</div>
</section>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">关于html - 粘性位置的多种情况，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55516896/