javascript - 使窗口滚动功能仅在一个div中运行

Question

在网页上我有多个部分。在本节之一中，我展示了很多内容 block 。这些 block 可以通过右侧 float 的面板进行过滤。

目前，此 float 面板在网页的所有部分上都可见，但我希望它仅在我分配给它的部分中可见。

理想情况下，我希望它卡在页面加载部分的右上角。然后，当用户到达该部分时，它需要与用户一起继续滚动，直到到达末尾，然后它需要停留在那里。

当用户完成页面浏览并向上滚动时，只需按相反的顺序执行与上述相同的操作。

需要做什么

• 使其仅在该部分中可见(分配特定部分)
• 使其在页面加载时停留在右上角
• 到达指定部分的末尾后禁止继续进入下一部分。

jsFiddle

https://jsfiddle.net/nfuL86hg/

HTML:

<div id="section-aaa"></div>
<div id="section-bbb">
  <div id="content"></div>
  <div id="scroller">
    Hello<br>
    World<br>
  </div>
</div>
<div id="section-aaa"></div>

JS:

(function ($) {
  $(document).ready(function() {
    $(window).scroll(function(){
      $("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
    });
  });
})(jQuery);

CSS:

#section-aaa{
  position:relative;
  height:500px;
  background:red;
}
#section-bbb {
  position:relative;
  height:1000px;
  background:grey;
}
#content {
  height:100%;
}
#scroller {
  background-color: #fca9a9;
  width: 250px;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 1;
}

感谢大家的帮助。

PS:如果你知道更好的标题请在评论区留言。一时之间我想不出更好的办法了。

Answer 1

这是一个演示

https://jsfiddle.net/nfuL86hg/2/

(function ($) {
  $(document).ready(function() {
    $(window).scroll(function(e){
     if(getIsInArea()){
     console.log('animate');
        $("#scroller").stop().animate({
        "marginTop": ($(window).scrollTop()) + "px", 
        "marginLeft":($(window).scrollLeft()) + "px"
        }, 100 );
     }

    });
    function getIsInArea(){

    var w = $(window).scrollTop();
        var p = $('#section-bbb').position();
      var top = p.top;
      var down = top+$('#section-bbb').innerHeight();
      if(w>=top && w<=down) {
        return true
      }

      return false;


    }
  });
})(jQuery);

期望接近您的需要