Question

我的帖子旁边有一个浮动框。这是post div的代码

 <div class="post-entry>
    <div class="float-div">
       data 
    </div>
  divs and text
 </div>

这是javascript代码，使其移动效果很好

<script type="text/javascript">     
$(function() {
 var offset = $(".float-div").offset();
 var topPadding = 100;
 $(window).scroll(function() {
     if ($(window).scrollTop() > offset.top) {
         $(".float-div").stop().animate({
             marginTop: $(window).scrollTop() - offset.top + topPadding
         });
     } else {
         $(".float-div").stop().animate({
             marginTop: 7
         });
       };
    });
  });
 </script>

问题是它一直移动整个页面直到页脚。但它必须在div“post-entry”结束时停止。关于如何让它停止的任何想法？

Answer 1

已更新，可与您合作Live Demo

以下内容将滚动到页脚，但可以修改为在需要时滚动。

var $scrollingDiv = $(".float-div");

$(window).scroll(function(){      
    var y = $(this).scrollTop(),
        $postEntry = $('.post-entry'),
        maxY = $postEntry.offset().top + $postEntry.height(),
        scrollHeight = $scrollingDiv.height();
    if(y< maxY-scrollHeight ){
        $scrollingDiv
        .stop()
        .animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );        
    }    
});

如果我理解你的问题，可能是Jquery Scrolling div - Prevent from entering site footer的副本。

到达post div结束时滑动div停止

1 个答案: