在哪里添加作用于滚动动作的脚本？答案

【问题标题】：Where to add a script that acts on the scrolling action?在哪里添加作用于滚动动作的脚本？
【发布时间】：2017-10-12 11:20:55
【问题描述】：

我正在尝试仅在一定的滚动长度后制作div visibe。 Stackoverflow 上已经有一些关于它的线程，所以我尝试使用答案中列出的建议脚本，但似乎没有一个可以工作。

所以，我想我不知道如何使用它们。

我已经把这个块放到了head，被两个script标签包围了：

function scroll_bar() {
    if (document.body.scrollTop > 700) {
        document.getElementById("navigation_bar").show();
    }
    else
    {
        document.getElementById("navigation_bar").hide();
    }
}

在body 中，我有一个div（我想要使其可见/隐藏的那个）具有以下属性：

<div onload="scroll_bar();" class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>

这里有什么问题吗？（无论如何我都在使用 Bootstrap，“容器”类来自它。）

【问题讨论】：

“它似乎不起作用”是指它对函数没有任何反应，就像它不存在一样。
删除位置：固定并检查
不，我想让它在滚动过程中固定在顶部（它在顶部，在 z-index 1 上）...
move onload="scroll_bar();"到身体

标签： javascript css scroll navbar

【解决方案1】：

您必须为“滚动”事件添加一个事件侦听器：window.addEventListener('scroll', scroll_bar)。同样在您的处理程序中，我会使用window.pageYOffset instead 或document.body.scrollTop。

【讨论】：

呃，我应该在哪里添加监听器？
已解决。 :) 我已经把它放到了body属性中，如... onscroll="window.addEventListener('scroll', scroll_bar)

【解决方案2】：

不要将您的<script> 放在您的<head> 中，而是放在您的结束正文标记（</body>）之前。这将确保内容在脚本之前加载，因此您的脚本应该正确运行。

  <p>I'm some content!</p>

  <script>console.log('JavaScript!');</script>

</body>

另外，您需要确保您的脚本函数在 the body scroll event. 上触发

【讨论】：

【解决方案3】：

你确定它很好吗？？

document.getElementById("navigation_bar").show();

"document.getElementById("navigation_bar")." 是 javascript。

"show()" 是 jquery。

尝试：

document.getElementById("navigation_bar").style.display = 'block'/'none'

或

$("#navigation_bar").show();

【讨论】：

非常感谢我不知道。无论如何都包含 Jquery，因为我使用的是 Bootstrap，并且默认情况下它就在那里......

【解决方案4】：

你把你的事件放错地方了。

请移动您的活动主体

代码

<body onload="scroll_bar();" >
<div class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
</body>

【讨论】：