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 Position

Answer 2

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

这是一个例子，它可以做得更好我确定

HTML：

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

或如果你们首先提出要求：configuration in the bindings

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

2 个答案: