在网页上我有多个部分。在本节之一中,我展示了很多内容 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/