根据悬停的页面部分的背景更改固定导航栏的类 [英] Change the fixed navbar's classes depending on the background of the page section it hovers
问题描述
我正在Bootstrap 4的一个网站上工作，该网站有浅色和深色背景以及固定导航栏。
I am working on a website in Bootstrap 4, that has sections with light and dark backgrounds and a fixed navbar.
导航栏很暗（有css类） bg-dark ），虽然它很容易在灯光部分可见，但它与暗的无法区分。
The navbar is dark (has the css class bg-dark) and, while it is easily visible against the light sections, it is indistinguishable against the dark ones.
我试图将导航栏的 navbar-dark bg-dark 更改为 navbar-light bg-light 当用户到达黑暗部分时（ 解决方案 ：
I have tried to change the navbar's navbar-dark bg-dark to navbar-light bg-light when the user reaches a dark section (the solution was suggested on StackOverflow):
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
$('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
.toggleClass('navbar-light bg-light', !isBGLight);
});
.page-section {
padding: 70px 10px
}
.page-section.bg-dark * {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid bg-light page-section">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div class="container-fluid bg-dark page-section">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div class="container-fluid bg-light page-section">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
尽可能看，我使用了滚动间谍，但打破了它的规则（这表明它需要锚点指向一个带有id的元素）：我的导航栏的项目指向网站的其他页面并且不到当前页面的各个部分。
As you can see, I have used scroll-spy but broken its rules (which state that it requires anchors to "point to an element with an id"): my navbar's items point to other pages of the website and not to sections of the current page.
适用于上述情况的替代是什么？
What is the alternative suited for the situation above?
推荐答案
我想我会更容易正确利用Bootstrap scrollspy的activate.bs.scrollspy事件，而不是违反其规则并简单地使用javascript代码覆盖默认的href导航。
I'm thinking i'd be easier to properly exploit Bootstrap scrollspy's "activate.bs.scrollspy" event rather than "breaking its rules" and simply override the default href navigation with javascript code.
所以我建议你将id添加回div，并将匹配的framgment hrefs添加到锚点，让Bootstrap通过obj.relatedTarget属性为activate.bs.scrollspy事件提供目标，根据需要切换类，并可选择从导航项中删除激活类，以便它看起来这些部分是相关的。如果您有其他部分，请尝试使用隐藏的锚点或隐藏的导航。
So i'd suggest you add back the id's to the divs and the matching framgment hrefs to the anchors, let Bootstrap give you the target in the "activate.bs.scrollspy" event via the obj.relatedTarget property, toggle the classes as needed and optionally remove the "activated" class from the nav items so it doesn't appear like the sections are related. If you have additional sections, try using hidden anchors or a hidden nav altogether.
当然，在我看来，最干净的方法是放弃滚动和使用window.scrollY和$（window）.on（'scroll'，...）。
查看摘录代码：
$(window).on('activate.bs.scrollspy', function (e, obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
$('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
.toggleClass('navbar-light bg-light', !isBGLight);
//Optional: Remove the active class from the anchor so it doesn't look like the nav is linked to the sections
$('.navbar-nav a[href="' + obj.relatedTarget + '"]').removeClass('active');
});
//Here we do the actual navigation
$('.navbar-nav a').click(function(e) {
//Prevent anchor's default behaviour of briefly jumping to the given section before navigating to another page
e.preventDefault();
//Substring to eliminate the leading "#"
window.location.href = $(e.target).attr('href').substring(1) + '.html';
})
.page-section {
padding: 70px 10px
}
.page-section.bg-dark * {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<!--Notice I changed the hrefs to point to the div ids-->
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<!--Notice I added the id's to let Bootstrap do it's job-->
<div id="about" class="container-fluid bg-light page-section">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="services" class="container-fluid bg-dark page-section">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid bg-light page-section">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
这篇关于根据悬停的页面部分的背景更改固定导航栏的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
