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

Posted 2023-05-08

【中文标题】我不知道我在做啥错，我想在页面滚动时更改导航栏的背景颜色

【英文标题】：I don't know what i am doing wrong, I want to change the background color of the navbar when the page gets scrolled我不知道我在做什么错，我想在页面滚动时更改导航栏的背景颜色

【发布时间】：2021-12-20 13:50:37

【问题描述】：

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

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

【问题讨论】：

从导航标签中移除navbar-dark类。

你有错误吗？

【参考方案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());
            );
        );

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

【讨论】：

请将您的代码添加到您的答案中，因为链接可能会在某些时候断开，然后您的答案将变得毫无意义。即使它是正确的。

@LajosArpad 你是对的，我希望它会好起来

Francesco，现在很好，我已经投了赞成票。谢谢！