Question

我正在设计一个具有与此功能类似的功能的网站： http://combo.nyc/projects/chillhouse

我想一次只锁定页面一半的滚动。我已经设计了两个面板.leftPanel和.rightPanel，但是我不确定如何获得这种效果。我假设有某种方法可以通过jquery来做到这一点，但是通过搜索，我还没有找到一个顺畅而正确地实现它的好方法。

任何人都可以帮助我找到一种好的方法，或者解释一下如何将此功能附加到我的网站中吗？

谢谢！

Answer 1

使用位置：顶部固定为0并相应地计算高度。不需要js。

.panelWrap{
  width: 100vw;
  background: #000;
  color: #fff;
}
.leftPanel{
  height: 100%;
  width: 50vw;
  float: left;
  background: green;
}
.rightPanel{
  height: 100%;
  width: 50vw;
  background: blue;
  float: right;
  height:
}
p{
height:100vh;
}
.is-sticky{
position: sticky;
top: 0;
background: red;
height: 200px;
}

<div class="panelWrap">
  <div class="leftPanel">
  <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
  <div class="is-sticky">
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>


</div>
 <p>Many desktop publishing packages and web page editors
</p>
 <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

  </div>
  <div class="rightPanel">
   <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
</p>
 
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>  <div class="is-sticky">
     <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
</p>
</div><p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
  </div>
</div>

如何实现半屏滚动锁定效果？

1 个答案: