Question

我试图在一定滚动长度之后制作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，“容器”类来自它。）

Answer 1

你必须在＆＃39;滚动＆＃39;中添加一个事件监听器。事件：window.addEventListener('scroll', scroll_bar)。同样在您的处理程序中，我会使用window.pageYOffset instead的{{1}}。

Answer 2

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

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

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

</body>

此外，您需要确保您的脚本功能在the body scroll event.

上触发

Answer 3

你确定它很好吗？

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

“document.getElementById（”navigation_bar“）。”是javascript。

“show（）”是jquery。

尝试：

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

或

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

Answer 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>

在哪里添加一个作用于滚动动作的脚本？

4 个答案: