当前位置: 首页 > 知识库问答 >
问题:

导航栏更改颜色javascript不工作

上官思博
2023-03-14

在这里,我尝试在向下滚动时修改导航栏。我读到这个问题:

滚动后更改导航栏颜色?

向下滚动时导航栏中的转换

引导导航栏将颜色更改为滚动

我不能让它在我的网站上工作,我不明白这个问题:

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的另一个版本:滚动后更改导航条颜色?

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的,这里什么不起作用?

共有2个答案

莫泓
2023-03-14

最后,我使用以下方法实现了它(作为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

非常感谢。

濮阳立果
2023-03-14

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

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

不管你怎么检查它

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

你还有:

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

将这些都设置为$(窗口)$(文档),它就会工作。

 类似资料:
  • 在我的应用程序中,我需要更改底部导航栏的颜色。我看了很多帖子,但没有找到解决办法。我正在使用appCompat库。 v21/样式。xml

  • 问题内容: 我正在尝试更改导航器栏的颜色,但是我发现只有导航器是根导航器,这才是不可能的。 我正在尝试: 我所有与导航器控制器有关。但是什么都没有改变。实际上,我试图从情节提要中进行相同的操作,但只有在我处于第一个导航器中时,它才有效。 我试图阅读与此问题有关的所有内容,但一无所获 我可以像这样将任何项目添加到导航栏 问题答案: 实际上,我发现该解决方案将用于: 然后在每个视图控制器中,我们需要另

  • 我尝试了很多方法来改变导航栏的颜色,比如 AndroidLollipop更改导航栏颜色 android更改导航栏颜色 如何更改系统导航栏颜色 什么都不管用 我将该项目添加到样式中。xml-使用Android 8.1 任何人都知道在Xamarin做这件事的最佳方式是什么。Android 更新:我在样式文件中尝试了以下代码

  • 我想要一个半透明的状态栏和导航栏,其他颜色不能像蓝色或白色那样半透明 我的代码 活动 状态栏半透明良好,但导航栏颜色不变。为什么? 导航栏

  • 我现在有一段html,它代表我的导航栏的相关部分: 我有一个css,我希望用它来改变导航栏的文本颜色: 唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题,谁就能解决另一个问题。

  • 我需要将导航栏链接更改为白色,并在导航栏上留出空间。我已经为此编写了代码,但我似乎不明白为什么/在哪里它一直被覆盖。导航栏的背景是一个图像,链接似乎变为白色,而图像不在其中,那么有没有办法修复这个问题并将图像保留在背景中? 有人能帮我理解我做错了什么吗?