在网页上我有多个部分。在这部分内容中,我展示了很多内容块。这些块可以通过漂浮在右侧的面板进行过滤。使窗口滚动功能只能在一个div中操作
目前,此浮动面板在网页的所有部分都可见,但我希望它只在我分配的部分中可见。
理想情况下,我会希望它卡在页面加载部分的右上角。然后,当用户到达该部分时,需要与用户保持滚动,直到到达结尾,那么它需要停留在那里。
当用户在页面上完成并向上滚动时,它需要按照与上述相同的操作顺序进行。
什么需要做
- 让它只有部分内可见的(分配一个特定部分)
- 让它停留在右上角的页面加载
- 不允许继续到下一个在到达指定部分的末尾之后的部分。
的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:如果你知道一个更好的标题,请将它发布在评论区。目前我想不出一个更好的。
我喜欢你的解决方案我接受它作为答案。非常感谢你。 PS:如果你认为这个问题很明确,那么我会非常感激赞成。 – purple11111
我的英语不好,所以我thik,这是非常intiutive –