使用scroll-spy更改导航栏背景类 [英] Use scroll-spy to change the navbar background classes
问题描述
我正在Bootstrap 4的网页上工作，该网页的各个部分具有浅色和深色背景以及固定的导航栏.导航栏是深色的(具有css类bg-dark)，尽管在浅色部分很容易看到，但与深色的却无法区分.
I am working on a web page in Bootstrap 4, that has sections with light and dark backgrounds and a fixed navbar. 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.
我已经在页面上添加了Bootstrap的滚动间谍，但是 所做的是将active类添加到导航栏项中，如下所示:
I have added Bootstrap's scroll-spy to the page, but what it does is add the active class to the navbar items, as seen below:
.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 navbar-dark bg-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<div id="section1" 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="section2" 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="section3" 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为section3的div或具有 class bg-light的(甚至更好)的div时，如何将导航栏的navbar-dark bg-dark更改为navbar-light bg-light?
How can I change the navbar's navbar-dark bg-dark to navbar-light bg-light when the user reaches div with id section3 or (even better) with class bg-light?
推荐答案
没有内置方法可以更改活动类的目标，因此您需要使用javascript选项.幸运的是，Bootstrap 4确实提供了一个事件，该事件会在设置新的活动项目时触发.一个奇怪的夸克是文档建议您可以使用data-spy将listener事件添加到元素.这是行不通的.您必须将其添加到window对象( https://stackoverflow.com/a/48694139/854246 ) .这是一个代码段:
There's no built-in way to change the target of the active class, so you're left with a javascript option. Fortunately, Bootstrap 4 does provide an event that gets triggered when a new active item is set. One odd quark with it is that the documentation suggests you can add the listener event to the element with data-spy. This does not work. You have to add it to the window object (https://stackoverflow.com/a/48694139/854246). Here's a code snippet:
$(window).on('activate.bs.scrollspy', function (e,obj) {
// spy changes to the last item at the end of the page,
// so we want to avoid changing the class at this point.
// Spy still works, but we want the class to be based on
// whatever block was closest.
// https://stackoverflow.com/a/40370876/854246
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
// Here we detect the targets class. I'm just using bg-
// light. Not the most robust solution, but it can be
// tweaked.
var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
// note that navbar needs two classes to work. If you
// only set bg-light/bg-dark, the link text color doesn't
// change.
$('.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 navbar-dark bg-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<div id="section1" 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="section2" 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="section3" 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>
我会将其作为一个堆栈摘要，但是出于安全原因(在沙盒中的iframe和诸如此类的情况下)，出于安全原因，当您监听 显然它支持它.只是不喜欢使用window对象上的事件时，Stack Overflow不喜欢它，因此这里有个小提琴来说明这一点解决方案:console.log
I would make this a stack snippet, but Stack Overflow doesn't like it when you listen to events on the Apparently it does support it. It just doesn't like when you use window object for security reasons (sandboxed iframe and whatnot), so here is a fiddle demonstrating this solution:console.log
https://jsfiddle.net/jmarikle/jzg7ok0v/
这篇关于使用scroll-spy更改导航栏背景类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
