仅使用 Javascript 滚动显示/隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17895318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide Element on Scroll Using Javascript Only
提问by Angelo Suerte
I am building a very light wp theme. The sidebar has few widgets, filling two page length only. Now, I want to utilize the rest of the sidebar when the widgets are out of sight as the user scrolls down. This would be great especially if the article is very long.
我正在构建一个非常轻的 wp 主题。侧边栏几乎没有小部件，仅填充两页长度。现在，当用户向下滚动时小部件不在视线范围内时，我想利用侧边栏的其余部分。这会很棒，特别是如果文章很长。
Floating element using jquery is common. As what I've said, this is supposed to be very light theme. jQuery is very heavy. Is it possible to use javascript only, even just appear and disappear, to display an element at certain page length?
使用 jquery 的浮动元素很常见。正如我所说，这应该是非常轻松的主题。jQuery 很重。是否可以仅使用 javascript，甚至只是出现和消失，以显示特定页面长度的元素？
Note: This theme is responsive.
注意：这个主题是响应式的。
[UPDATE] Problem solved! Thanks to all.
[更新] 问题已解决！谢谢大家。
I saved 100kb+ bandwidth for jQuery.
我为 jQuery 节省了 100kb+ 的带宽。
As a reference to others, here is the new script.
作为对他人的参考，这里是新的脚本。
<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>
回答by samrap
To FULLY answer your question you could use:
要完全回答您的问题，您可以使用：
window.onscroll(function() {
document.getElementById("target-id").style.display = "block";
});
The function is triggered when the window is scrolled. It would be a good idea to put this function inside of your function for dragging the div, that way this function isn't called if the user is simply scrolling the page. If you are looking for a specific amount for the window to scroll, for example "show the additional divs when the window is scrolled 400px", there is a great answer for that here: Trigger events when the window is scrolled to certain positions
当窗口滚动时触发该函数。最好将此函数放在拖动 div 的函数中，这样如果用户只是滚动页面，则不会调用此函数。如果您正在寻找窗口滚动的特定数量，例如“当窗口滚动 400 像素时显示额外的 div”，这里有一个很好的答案：当窗口滚动到某些位置时触发事件
I recommend using the link I've provided to set a position because window.scroll is called immediately and might not be quite what you're looking for.
我建议使用我提供的链接来设置位置，因为 window.scroll 会立即被调用并且可能不是您想要的。
回答by Madan Ram
If you don't use any 3rd party javascript (eg: jQuery), then use it:
如果您不使用任何 3rd 方 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)
回答by Optimus Prime
document.getElementById("target-id").style.visibility = "visible"; //To show the element.
Edited..
编辑..
you can accomplish this using regular Javascript:
您可以使用常规 Javascript 完成此操作：
<script>
function scrollFunction() {
document.getElementById("target-id").style.visibility = "hidden"; //To hide the element.
}
window.onscroll = scrollFunction;
</script>
