我不知道我在做什么错，我想在页面滚动时更改导航栏的背景颜色

Question

这就是我正在做的，我使用引导程序来设置这个导航的样式。导航基本上折叠并出现一个切换按钮。

<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark py-0 fixed-top ">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">CANDY</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
                class="btn btn-info">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <ul class="navbar-nav ">
                    <li class="nav-item">
                        <a class="nav-link" href="#">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">TICKETS</a>
                    </li>
                </ul>
            </div>
    </nav>

这是滚动时设置样式的 css。没有使用其他任何样式来设置它

#mainNavbar.scrolled{
    background-color: #ac3bac;
    transition: background 500ms;
}

但问题是它没有切换“滚动”类来设置它的样式。我尝试了多种方法，但都没有奏效。如果可能，请帮我完成它

<script>enter code here
        $(function () {
            $(document).scroll(function () {
                var $nav = $("#mainNavbar");
                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
            });
        });
    </script>

Answer 1

我刚刚尝试了您的代码here，希望它能帮助您专注于您的问题。

我添加了一些 lorem 以使窗口正确滚动，以触发事件。

HTML：

<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark py-0 fixed-top ">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">CANDY</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
                class="btn btn-info">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <ul class="navbar-nav ">
                    <li class="nav-item">
                        <a class="nav-link" href="#">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">TICKETS</a>
                    </li>
                </ul>
            </div>
    </nav>
<!--tags below are only there in order to fill the space in order to obtain the scrollbar-->
<div class="grid">
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
    <div class="el">Lorem ipsum dolor sit amet.</div>
</div>

CSS：

body{
  background-color: black;
}

#mainNavbar.scrolled{
    background-color: #ac3bac;
    transition: background 500ms;
}

/* This is in order to obtain a scrollable view in the example */
.grid{
  display: grid;
}

.el{
  height: 20vh;
}

JS

  $(function () {
            $(document).scroll(function () {
                var $nav = $("#mainNavbar");
                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
            });
        });

一切正常，你确定你添加了所有正确的脚本吗？