[英]Toggle scroll class on all pages except one
基本上,我有一个透明的导航栏,滚动条上会变成白色,徽标从白色变为黑色。
这可以正常工作,但是我的问题是我在某个特定页面上(/ 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());
});
感谢您的帮助。
您可以在顶部为您的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,很难说清楚,但是原理保持不变)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.