Question

我不知道如何描述我的内容，所以我只是展示代码

<div class="room-pos">
<div class="right-content nano-content">
    <div id="right-fix">

    </div>
</div>
    <div class="left-content ">

    </div>
</div>

.room-pos{
    position: relative;
}

.fixed-c{
    position:fixed;
}

.right-content{
    background: #FFF none repeat scroll 0% 0%;
    width: 45%;
    position: absolute;
    right: 0;
    top:0;
    bottom:0;
    z-index:5;
    border-left: 1px solid #F2F2F2;
}
.left-content{
    width: 55%;
    float: left;
}

$(window).scroll(function() {
      if ($(this).scrollTop() >= $('#right-fix').height() - $(window).height() + 30) {
        $('#right-fix').addClass( "fixed-c");
        $("#right-fix").css("top", $(window).height() - $('#right-fix').height() );
      } else if($(this).scrollTop() < $('#right-fix').height() - $(window).height() + 30) {
        if ($('#right-fix').hasClass( "fixed-c")){
          $('#right-fix').removeClass( "fixed-c");
        }
      }

}）;

Same code in a jsfiddle

我想要构建的内容：

现在，当您向下滚动查看某个scrollTop参数时，右边的块会变为fixed，而top: - some px会变为top: -832px。我想改变这一点，当右侧块变为fixed时，在您开始滚动到页面顶部后，右侧块也开始滚动到顶部。因此，当您滚动到底部时，右侧块也会滚动到底部并变为fixed，当您滚动到顶部时，右侧也会滚动到顶部。所以我认为我必须在top参数动态中更改css，类似

我很难解释我的意思 - 我希望有人理解。

更新：新链接演示！

更新2 ：添加我要构建的内容但是在算法CODE EXAMPLE中有错误

不那么简单的滚动

0 个答案: