Javascript 滚动时根据其他元素显示/隐藏（切换）固定元素？

有没有一种方法可以根据垂直滚动时通过的元素在显示和隐藏固定元素之间切换

以下是我希望实现的目标的视觉参考：

我更希望它能够检测固定元素在页面上的位置，而不是窗口的滚动位置

希望这张照片足够说明问题；否则，请检查以下代码段：

$document.readyfunction{ var$window=$window； var div2=$'div2'； var div1=$'div1'； var div1_top=div1.offset.top； var div1_height=div1.height； 变量div1\u-bottom=div1\u-top+div1\u-height； 控制台。logdiv1_底部； $window.on'scroll'，函数{ var scrollTop=document.documentElement.scrollTop； var viewport_height=$window.height； var scrollTop\u bottom=scrollTop+视口高度； div2.切换class'show'，scrollTop>div1\u-top&&scrollTop+window.innerHeight

如果是的话，解决方案是你应该考虑窗口顶部的距离到中心部分

编辑

添加注释所包含的功能

$document.readyfunction{ var$window=$window； var div2=$'div2'； var div1=$'div1'； $window.on'scroll'，函数{ var scrollTop=document.documentElement.scrollTop； var viewport_height=$window.height； var scrollTop\u bottom=scrollTop+视口高度； var window_top_to_div2=$window.height-div2.height/2； var div1_top=div1.offset.top； var div1_height=div1.height； 变量div1\u-bottom=div1\u-top+div1\u-height；

---

div2.toggleClass'show'，scrollTop>=div1\u top-window\u top\u to\u div2&&scrollTop+window.innerHeight是的，这正是我试图实现的。谢谢！事实上，我很想知道，在div1的高度根据其内部内容而不是静态1500px而变化的情况下，该函数是否也能工作。没问题div1的高度是动态的，但您应该将div1_top和div1_bottom放在滚动事件处理程序中，使其成为动态的。感谢您的建议。如果不太麻烦，您是否可以根据您的建议调整代码段？是的，现在效果很好！非常感谢您提供的额外帮助。