Question

使用粘性位置时遇到相同的问题。

例如

1）第一种情况，粘性位置在此情况下起作用。

import csv
import tempfile

temp_file = tempfile.NamedTemporaryFile(mode='w', delete=False) # note the mode argument

with open('clientlist.csv','r') as csvfile, temp_file:  #note the mode argument
    reader = csv.DictReader(csvfile)
    fieldnames = ['Account Name','Account Number','Date Last Checked']
    writer = csv.DictWriter(temp_file, fieldnames=fieldnames)
    writer.writeheader()
    for row in reader:
        writer.writerow({
            'Account Name': row['Account Name'],
            'Account Number': row['Account Number'],
            'Date Last Checked': row['Date Last Checked'],
        })

2）第二种情况，粘性位置在此情况下不起作用，因为我添加了父div。那么，是否还有其他方法可以通过粘滞div的父类来处理此问题？

<div class=">
<div class="">sticky position</div>
<div class="">some content</div>
</div>

3）第三种情况，如果粘性位置在第一部分中，该部分仅在第一部分中起作用。如果第二部分需要相同的粘性位置怎么办？

<div class=">
      <div class=""><div class="">sticky position</div></div>
      <div class="">some content</div>
</div>

我尝试了前两个Senario

第一参议员

<section>
<div class="">sticky position</div>
<div class="">some content</div>
</section>

<section>
<div class="">some content</div>
</section>

.positionSticky {
  position: sticky;
  top: 50px;
  background-color: #ff0000;
  width: 200px;
  height: 200px;
}

第二senario

<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;
}

使用@Jake答案后

<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>

#height_100vh {
  height: 100vh;
}

.positionSticky {
  position: sticky;
  top: 50px;
  background-color: #ff0000;
  width: 200px;
  height: 200px;
}

.ps-dad {
  display: inline;
}

第一种情况有效。我需要解决第二种情况和第三种情况。你能帮我这个忙吗？

Answer 1

第一种解决方案：将所有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的父级设置为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">

粘性位置的多种情况

1 个答案: