在所有页面上切换滚动类，除了一个答案

【问题标题】：Toggle scroll class on all pages except one在所有页面上切换滚动类，除了一个
【发布时间】：2018-09-06 12:44:32
【问题描述】：

基本上，我有一个透明的导航栏，滚动时会变成白色，徽标会从白色变为黑色。

这可以正常工作，但我的问题是，在一个特定页面上，我 (/toursearch) 我的导航使用白色背景，并且只想显示黑色徽标。但是滚动类仍在应用中并导致我出现问题。

所以我的问题是，我将如何定位除旅游搜索页面之外的所有其他页面？

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
    <div class="container-fluid">
        <button class="navbar-toggler collapsed nofocus" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
        </button>
        <!-- LOGO -->
        <div class="logo-desk d-none d-sm-none d-md-none d-lg-block">
            <a class="navbar-brand" href="/"><img src="/Includes/images/logo/holts-logo-trans.png" class="img-fluid" /></a>
        </div>
        <!-- END LOGO -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item all-tours">
                    <a class="nav-link" href="/toursearch">Tours</a>

                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/destinations">Destinations<span class="mob-menu-icon float-right d-sm-block d-lg-none"><i class="fas fa-chevron-right"></i></span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/about-us">About Us<span class="mob-menu-icon float-right d-sm-block d-lg-none"><i class="fas fa-chevron-right"></i></span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/teaching-resources">Resources <span class="mob-menu-icon float-right d-sm-block d-lg-none"><i class="fas fa-chevron-right"></i></span></a>
                </li>


            </ul>
        </div>
    </div>
</nav>

jQuery

$(document).scroll(function () {
    var $nav = $(".navbar-light");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});

提前感谢您的帮助。

【问题讨论】：

标签： jquery html

【解决方案1】：

您可以在顶部为您的tour 页面指定一个特定的类，例如

<body class='tourpage'>

然后相应地设置你的css：

.navbar-light .logo-desk { background-color: white; } 
.tourpage .navbar-light .logo-desk { background-color: black }

.navbar-light.scrolled .logo-desk  { background-color: black }
.tourpage .navbar-light.scrolled .logo-desk  { background-color: white }

（更改 css 选择器/颜色以匹配您的特定需求，如果没有您当前的 css，有点难以分辨，但原理保持不变。

【讨论】：

一旦给body标签添加了一个类，你可以修改你的jQuery选择器来实现你的结果。修改为var $nav = $("body:not(.tourpage) .navbar-light");
@Jishad 这是一个很好的补充。走这条路，最好把它设为可重用/通用名称，例如.no-nav-scroll$("body:not(.no-nav-scroll) .navbar-light")，以后可以应用到任何页面。