仅使用Javascript在滚动上显示/隐藏元素
我正在构建一个非常轻的wp主题。 侧边栏包含很少的小部件，仅填充两页长度。 现在，当用户向下滚动时，当小部件不在视线范围内时，我想利用侧边栏的其余部分。 如果文章很长，这将是非常好的。
使用jquery的浮动元素很常见。 正如我所说，这应该是非常轻松的主题。 jQuery很重。 是否可以仅使用javascript，甚至只是出现和消失，以显示特定页面长度的元素？
注意：此主题具有响应性。
[更新]问题解决了！ 谢谢大家。
我为jQuery节省了100kb +带宽。
作为对他人的参考，这是新脚本。
var width = window.innerWidth || document.documentElement.clientWidth; //Trigger the script only on browser width above 1150px. Recommended on responsive websites if (width > 1150){ function testScroll(ev){ //Will set the position to FIXED with TOP=80px when user scrolls 850px below. if(window.pageYOffset>850){document.getElementById("targetID").style.position = "fixed";document.getElementById("targetID").style.top = "80px";} //Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line else {document.getElementById("targetID").style.position = "absolute";document.getElementById("targetID").style.top = "auto";}; window.onscroll=testScroll; }; 要完全回答您的问题，您可以使用：
window.onscroll(function() { document.getElementById("target-id").style.display = "block"; });
滚动窗口时会触发该function。 将此函数放在函数内部以拖动div是个好主意，这样如果用户只是滚动页面，就不会调用此函数。 如果您正在寻找滚动窗口的特定数量，例如“当窗口滚动400px时显示其他div”，那么这里有一个很好的答案： 当窗口滚动到某些位置时触发事件
我建议使用我提供的链接来设置位置，因为window.scroll立即被调用，可能不是你想要的。
如果你不使用任何第三方javascript（例如：jQuery），那么使用它：
document.getElementById('target-id').style.display = 'none'; // hide it document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div) document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)
document.getElementById("target-id").style.visibility = "visible"; //To show the element.
编辑..
你可以使用常规Javascript完成这个：