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

我正在构建一个非常轻的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>

var-width=window.innerWidth | | document.documentElement.clientWidth；
//仅在浏览器宽度大于1150px时触发脚本。在响应性网站上推荐
如果（宽度>1150）{功能测试滚动（ev）{
//当用户在下方滚动850px时，将位置设置为固定，顶部=80px。
如果（window.pageYOffset>850）{document.getElementById（“targetID”）.style.position=“固定”；document.getElementById（“targetID”）.style.top=“80px”}
//当用户滚动到850px线上方的顶部时，将位置设置为绝对，顶部=自动
else{document.getElementById（“targetID”）.style.position=“绝对”；document.getElementById（“targetID”）.style.top=“自动”}；
onscroll=testScroll；}；

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

---

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

编辑。。 您可以使用常规Javascript实现这一点：

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

window.onscroll = scrollFunction;
</script>

函数滚动函数（）{
document.getElementById（“目标id”）.style.visibility=“hidden”//隐藏元素。
}
window.onscroll=滚动函数；

编辑。。 您可以使用常规Javascript实现这一点：

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

window.onscroll = scrollFunction;
</script>

函数滚动函数（）{
document.getElementById（“目标id”）.style.visibility=“hidden”//隐藏元素。
}
window.onscroll=滚动函数；

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

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

滚动窗口时会触发此函数。最好将此函数放在拖动div的函数中，这样，如果用户只是滚动页面，则不会调用此函数。例如，如果您正在查找要滚动窗口的特定数量“当窗口滚动400px时显示额外的div”，这里有一个很好的答案：

---

我建议使用我提供的链接来设置位置，因为window.scroll会立即被调用，并且可能不是您想要的。要完全回答您的问题，您可以使用：

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

滚动窗口时会触发此函数。最好将此函数放在拖动div的函数中，这样，如果用户只是滚动页面，则不会调用此函数。例如，如果您正在查找要滚动窗口的特定数量”当窗口滚动到400px时显示其他div”，这里有一个很好的答案：

---

---

我建议使用我提供的链接来设置位置，因为window.scroll会立即被调用，可能不是您想要的。如果您只需要javascript，为什么要标记jQuery？我认为删除jQuery也是jQuery主题的一部分。这就像创新（？）.如果您只想要javascript，为什么要标记jQuery？我认为消除jQuery也是jQuery主题的一部分。这就像创新（？）。当小部件看不见时，你如何实现这一点？比方说，用户向下滚动？当小部件看不见时，你如何实现这一点？比方说，用户向下滚动？很好。但问题是，如何触发滚动时隐藏/可见？@Angeloserte查看编辑的内容。你需要使用

window.onscroll窗口。OnLoops是的，谢谢。还有一件事：你怎么能在页面的某个区域上实现这一点？也许在用户几乎已经完成阅读的页面的中间？“天使”这个问题告诉你如何获得用户已经滚动到的位置。好的Sam. Lemme尝试它。首先。嘿，山姆！代码和链接一起工作！现在，我在侧边栏上制作了一个元素浮动框。我没有显示/隐藏，而是将其设置为位置：固定；偏移量>1000px时top=0，位置：绝对；偏移量<1000px时top=auto。我在jQuery上保存了100+kb。太好了！山姆！让我先试试。嘿，山姆！代码和链接一起，works！现在，我在侧边栏上制作了一个元素浮动框。我没有显示/隐藏，而是将其设置为位置：固定；偏移量>1000px时top=0，位置：绝对；偏移量<1000px时top=auto。我在jQuery上保存了100+kb。太好了！