两列，一列具有粘性[重复]

Question

我有一个简单的两列布局：

.container {
  display: flex;
  flex-direction: row;
}

.col {
  padding: 30px;
  width: 20%;
}

.col.right {
  position: sticky;
}

<div class='container'> 
  <div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
  </div>
  <div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
  </div>
</div>

当左栏滚动时，我希望右栏贴在视口的顶部，但我也希望右栏可以滚动。这可以用 CSS 实现吗？

Answer 1

滚动需要一些高度限制，这样应该可以工作。

.container {
  display: flex;
  flex-direction: row;
  
  overflow: auto; /* Scroll ability */
  height: 500px; /* Need some height constraint */
  
}

.col {
  padding: 30px;
  width: 20%;
}

.col.right {
  position: sticky;
  
  top: 0; /* Stick limit */
  overflow: auto; /* Scroll ability */
}

<div class='container'>
  <div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
  </div>
  <div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
  </div>
</div>