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

标签 javascript jquery html css scroll

在一个网页上,我有多个部分。在其中一个部分中,我展示了许多内容 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:如果您知道更好的标题,请在评论区发布。此刻我想不出更好的了。

最佳答案

这是一个演示

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);

期待就在你身边

关于javascript - 使窗口滚动功能只在一个div中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42518348/

相关文章:

jquery - 如何使 block 外观光滑?

javascript - Django Bootstrap 警报未按预期工作

jquery - 在jquery中更改类名

Javascript 函数在 Firefox 中运行多次,在 Chrome 中只运行一次,为什么?

javascript - 如何在chart.js中制作矩形

javascript - 使用选择器获取完整的 ID 搜索

javascript - Javascript-如何从右键单击获取图像网址

php - 如何将选定的选项值传递为文本字段的name属性?

javascript - 如何与 Jest 共享多个套件中的测试用例?

javascript - DataTables : Using Row grouping, 如何获得分组条目的计数?