1

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

3 回答 3

3

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

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

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

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

于 2013-07-27T07:53:19.523 回答
1

如果您不使用任何 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)
于 2013-07-27T07:24:07.493 回答
1 
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>
于 2013-07-27T07:30:16.470 回答