导航栏更改颜色javascript不起作用答案

【问题标题】：Navbar change color javascript not working导航栏更改颜色javascript不起作用
【发布时间】：2019-04-14 18:25:10
【问题描述】：

在这里我尝试在向下滚动期间修改导航栏。我读了这个问题：

Bootstrap navbar change color to the scroll

我无法让它在我的网站上运行，我不明白这个问题：

HTML：

<!-- Navbar -->
<nav class="navbar justify-content-center navbar-expand-sm navbar-dark fixed-top navbar-custom">
    <!-- Menu Links -->
    <ul class="navbar-nav" >
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
            <!-- Wanted Logo -->
        <a class="navbar-brand" href="#">
        <img src="img/logo-light.png" alt="wanted_logo" style="width: 3vw;">
        </a>
        <li class="nav-item">
          <a class="nav-link" href="#">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</nav>
<!-- End Navbar -->

CSS：

.navbar-custom {
    background-color: rgba(0,0,0,0.5);
}

.navbar-custom ul li{
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    padding-top: 34px;

}

.navbar-custom img{
    margin-left: 20px;
    margin-right: 7px;
}

.navbar-custom.scrolled {
    background-color: red !important;
    transition: background-color 200ms linear;
}

JS：

<script>$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-custom");
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
  });
});
</script>

根据我的理解，当向下滚动超过导航栏的大小时，它应该会改变颜色。

我虽然这可能是一个问题，因为导航栏的高度没有在这里明确定义，所以我尝试添加：

CSS

.navbar-custom{
    background-color: rgba(0,0,0,0.5);
    height: 100px;
}

还是不行，所以我也尝试使用这里提出的另一个版本的JS：Changing nav-bar color after scrolling?

JS：

<script type="text/javascript">
    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {
          $(".navbar-custom").css("background-color", "#f8f8f8");
        } else {
          $(".navbar-custom").css("background-color", "blue");
        }
      });
    });
    </script>

结果相同，没有任何变化。

我是使用 JS 的新手，什么在这里不起作用？

【问题讨论】：

标签： javascript html css twitter-bootstrap navbar

【解决方案1】：

这是因为您使用的滚动不一致。你有

$(window).scroll(function() {...});

但是你正在检查它

if ($(document).scrollTop() > 100) {...}

你还有：

$(document).ready(function() {...});

将这些全部设置为$(window) 或$(document)，这样就可以了。

【讨论】：

但是为什么这不起作用：
因为您检查的内容与您的功能所关注的内容不同。
嗯..我不完全明白。而且我尝试将所有 $(document) 更改为 $(window) 它不起作用然后我更改为所有 $(document) 并且它也不起作用：/顺便说一句，我不使用 2 个脚本同时。

【解决方案2】：

最后，我使用它来实现它（作为 w3 回到顶部按钮教程的一部分）：

JS：

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        var $nav = $(".navbar-custom");

    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 50) {
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
    }
    }
</script>

w3school 返回顶部按钮的链接：https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

谢谢

【讨论】：