Question

我正在使用Bootstrap 3导航栏创建一个站点，并且当用户滚动到站点上的某个点时，我尝试将背景颜色从透明变为实色。

我已经编写了以下代码，虽然没有运气让它工作。提前谢谢。

HTML：

<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
    <div class="container">
        <div class="navbar-header">
            <!-- Mobile Hamburger -->
            <button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
        </div>
        <div class="navbar-collapse collapse">
            <!-- Navigation Links -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">HOME</a></li>
                <li><a href="">COURSES</a></li>
                <li><a href="">PRICING</a></li>
                <li><a href="">ACCOUNT</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar { background-color:#101010; border:none; }
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }

@media only screen and (min-width:768px) {
    .navbar { background-color: transparent; border:none; transition:0.8s; }
    .nav-scrolled { background-color:#181818; transition:0.8s; }
    .navbar-right li a { letter-spacing:3px; }
}

JS：

// Change nav on scroll
$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 200) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    })
});

ALT：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>

Answer 1

这是您确切的代码，减去css周围的媒体查询，向您展示它的工作原理。我还为导航添加了额外的高度，以便您可以实际滚动。

如果您的代码无法在您的计算机上运行，则可能无法正确引用文件。

// Change nav on scroll
$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 200) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    })
});

.navbar { background-color:#101010; border:none; height: 200vh}
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }


    .navbar { background-color: transparent; border:none; transition:0.8s; }
    .nav-scrolled { background-color:#181818; transition:0.8s; }
    .navbar-right li a { letter-spacing:3px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
    <div class="container">
        <div class="navbar-header">
            <!-- Mobile Hamburger -->
            <button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
        </div>
        <div class="navbar-collapse collapse">
            <!-- Navigation Links -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">HOME</a></li>
                <li><a href="">COURSES</a></li>
                <li><a href="">PRICING</a></li>
                <li><a href="">ACCOUNT</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

根据滚动更改导航栏上的CSS

1 个答案: