编辑..

Question

我正在构建一个非常轻的wp主题。侧边栏包含很少的小部件，仅填充两页长度。现在，当用户向下滚动时，当小部件不在视线范围内时，我想利用侧边栏的其余部分。如果文章很长，这将是非常好的。

使用jquery浮动元素很常见。正如我所说，这应该是非常轻松的主题。 jQuery很重。是否可以仅使用javascript，甚至只是出现和消失，以显示特定页面长度的元素？

注意：此主题具有响应性。

[更新]问题解决了！谢谢大家。

我为jQuery节省了100kb +带宽。

作为对他人的参考，这是新脚本。

<script defer type="text/javascript">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; };
</script>

Answer 1

如果您不使用任何第三方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)

Answer 2

document.getElementById("target-id").style.visibility = "visible";   //To show the element.

编辑..

您可以使用常规Javascript完成此操作：

<script>
function scrollFunction() {
     document.getElementById("target-id").style.visibility = "hidden";   //To hide the element.
}

window.onscroll = scrollFunction;
</script>

Answer 3

要完全回答您可以使用的问题：

window.onscroll(function() {
    document.getElementById("target-id").style.display = "block";
});

滚动窗口时会触发该功能。将此函数放在函数内部以拖动div是个好主意，这样如果用户只是滚动页面就不会调用此函数。如果您正在寻找滚动窗口的特定数量，例如“当窗口滚动400px时显示其他div”，那么这里有一个很好的答案：Trigger events when the window is scrolled to certain positions

我建议使用我提供的链接来设置位置，因为window.scroll会立即被调用，可能不是你想要的。

仅使用Javascript在滚动上显示/隐藏元素

3 个答案:

编辑..