Javascript 仅在某个位置使用页面制作div滚动？

如何使div与页面一起滚动，但仅在页面的特定区域内滚动

我不知道如何在页面的一部分使用CSS，我认为javascript可能是唯一的选择

例如，一个页面有三个部分，顶部，中间和底部

有一个右浮动DIV，它应该在中间部分与用户一起滚动，并停止滚动在“强>中< /强>节的顶部，以及<强>中< /强>节的底部。

#顶部{
背景颜色：灰色；
宽度：100%；
高度：400px；
}
#中间的{
背景颜色：绿色；
宽度：100%；
高度：800px；
}
#底部{
背景颜色：蓝色；
宽度：100%；
高度：400px；
}
#滚动部分{
背景颜色：黄色；
宽度：30%；
高度：150像素；
浮动：对；
}

此框应沿绿色部分滚动，但在绿色部分的顶部和底部“截止”并停止滚动

需要一些Javascript来读取要更改要寻址的div状态的点。您可以使用

getBoundingClientRect（）

方法执行此操作。我做了一把小提琴给你看。 结果是你读到了#Middle的位置。我添加了一个显示值的输入字段。当位置达到零时，将发生变化。然后更改#滚动部分的CSS属性

您将看到一些增加的元素读数，以确保它可以定位到位，并保持其原始宽度

var scrollposition=document.getElementById（“中间”）；
var scrollsection=document.getElementById（“滚动节”）；
var scrollsection_offsetLeft=scrollsection.offsetLeft；
var scrollsection_width=scrollsection.offsetWidth；
var valy=document.getElementById（“posy”）；
window.addEventListener（“滚动”），函数（事件）{
valy.value=scrollposition.getBoundingClientRect（）.y | | scrollposition.getBoundingClientRect（）.top；
如果（valy.value我在手机上，但如果您添加

#scrolling-section {
  position: fixed;
  background-color: yellow;
  width: 30%;
  height: 150px;
  right: 8px;
}

这将与页面一起滚动，但确实需要一个事件侦听器，当屏幕上出现滚动部分时触发，可能会添加属性position:fixed；然后，当出现底部时，另一个事件侦听器将计算#中间集边距top&position:absolute的大小；希望这有助于指向右侧方向。
所以这里有使用jquery的解决方案：

收听
scroll
事件，计算
滚动部分在上/下滚动时超出
中间部分的量

将
位置：相对
添加到
滚动部分

相应地调整
滚动部分的位置


$（文档）。滚动（函数（）{
变量包装器=$（“#中间”）；
变量框=$（“#滚动部分”）；
var offsetTop=-wrapper.offset（）.top+$（window.scrollTop（）；
var offsetBottom=wrapper.offset（）.top-$（window.scrollTop（）+wrapper.outerHeight（）-box.outerHeight（）；
if（offsetBottom>0&&offsetTop<0）{
box.css({
“顶部”：0
});
}else if（offsetBottom>0&&offsetTop>0）{
box.css({
“顶部”：偏移量+“px”
});
}否则{
框.偏移量({
'top'：$（窗口）.scrollTop（）+offsetBottom
});
}
})；
#顶部{
背景颜色：灰色；
宽度：100%；
高度：400px；
}
#中间的{
背景颜色：绿色；
宽度：100%；
高度：800px；
}
#底部{
背景颜色：蓝色；
宽度：100%；
高度：400px；
}
#滚动部分{
位置：相对位置；
背景颜色：黄色；
宽度：30%；
高度：150像素；
浮动：对；
}

此框应沿绿色部分滚动，但在绿色部分的顶部和底部“截止”并停止滚动
Hi，您需要javascript，如果您使用的是Bootstrap，javascript部分下有一个afix，或者您可能需要自定义代码。非常感谢。工作非常好。