在页面向下滚动时创建固定位置文本然后停止某个位置

Question

我正在尝试创建与此页面上使用的效果基本完全相同的效果： http : //www.ohmy.io/work/landrover-live/

当您向下滚动页面时，文本会随着滚动条移动，然后停在某个位置。

任何人都可以直接了解如何做到这一点？

谢谢

Answer 1

我认为您正在寻找：

.some-class{
  position: sticky;
  top: //now used to set position to stick to
  left: //or you could sticky left, etc.
}

CSS 位置

Answer 2

当您点击页面底部或某个元素的位置时，您可以做的是在类之间切换......

这是一个例子，我相信它可以做得更好

网址：

 $(window).scroll(function() { console.log($(window).scrollTop()); //this is for normal window: // if($(window).scrollTop() + $(window).height() == $(document).height()) { //this is for this test: if ($(window).scrollTop()>100){ $(".stuck").addClass("release").removeClass("stuck"); } });

 .stuck{ position: fixed; padding-left: 400px; } .release{ position: relative; top: 320px; padding-left: 400px; } .main{ width: 400px; height: 1000px; } .left{ margin-top: 300px; width: 70%; float: left; } .right{ width: 30%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="main"> <div class="right stuck"> here i am </div> <div class="left"> will you send me an angel </div> </div>

或小提琴，如果你喜欢：小提琴示例