使窗口滚动功能只能在一个div中操作

Question

在网页上我有多个部分。在这部分内容中，我展示了很多内容块。这些块可以通过漂浮在右侧的面板进行过滤。

目前，此浮动面板在网页的所有部分都可见，但我希望它只在我分配的部分中可见。

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

当用户在页面上完成并向上滚动时，它需要按照与上述相同的操作顺序进行。

什么需要做

• 让它只有部分内可见的（分配一个特定部分）
• 让它停留在右上角的页面加载
• 不允许继续到下一个在到达指定部分的末尾之后的部分。

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

期望去接近你需要它

Answer 2

wihtout动画另一种解决方案，如果你想更简单。

检查它在这JSFiddle。

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> 

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

#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; 
} 

的JavaScript

(function ($) { 
    $(document).ready(function() { 
    $(window).scroll(function(){ 

     if ($(window).scrollTop() > $('#section-bbb').offset().top) { 
      if ($(window).scrollTop() < $('#section-bbb').offset().top + $('#section-bbb').height() - 100 - $('#scroller').height()){ 
       $('#scroller').css({"position":"fixed", "top":"50px", "bottom":"auto"}); 
      } else { 
       $('#scroller').css({"position":"absolute", "top":"auto", "bottom":"50px"}); 
      } 
     } else { 
      $('#scroller').css({"position":"absolute", "top":"50px", "bottom":""}); 
     } 

    }); 
    }); 
})(jQuery); 

在Javascript中它检查是否滚动顶部的窗口是在section-bbb股利，如果是，它会改变scroller股利的股份有position: fixed。如果窗口的滚动顶部低于section-bbb格，它将scroller格的CSS更改为具有position: absolute并位于section-bbb格（top:auto,bottom:50px）的底部。如果窗口的滚动顶部高于section-bbb格，它将scroller格的CSS更改为position: absolute，并位于section-bbb格（top:50px,bottom:auto）的顶部。