根据它所覆盖的页面部分的背景更改固定的导航栏类答案

【问题标题】：Change the fixed navbar's classes depending on the background of the page section it hovers根据它所覆盖的页面部分的背景更改固定的导航栏类
【发布时间】：2018-09-03 21:59:22
【问题描述】：

我正在使用 Bootstrap 4 开发一个网站，该网站的部分具有浅色和深色背景以及固定的导航栏。

导航栏是深色的（具有 css 类 bg-dark），虽然在浅色部分很容易看到它，但 与深色部分没有区别。

当用户到达 dark section 时，我尝试将导航栏的 navbar-dark bg-dark 更改为 navbar-light bg-light（StackOverflow 上建议使用 solution）：

$(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>

如您所见，我使用了 scroll-spy，但 违反了它的规则（它规定它需要锚点“指向具有 id 的元素”）：我的导航栏的项目指向其他网站的页面，不到当前页面的部分。

适合上述情况的替代方案是什么？

【问题讨论】：

“我的导航栏项目指向网站的其他页面，而不是当前页面的部分” 这不是 scrollspy 的用途......它仅适用于相同的页面。因此，如果您链接到其他页面，您的问题“根据其悬停的 页面部分的背景更改导航栏的类”对我来说毫无意义。
@Themes.guide 我正在尝试匹配背景颜色。这是目标，我不喜欢滚动间谍。我只是在描述我为实现目标所做的努力。

标签： javascript jquery css bootstrap-4 scrollspy

【解决方案1】：

我想我会更容易正确地利用 Bootstrap scrollspy 的“activate.bs.scrollspy”事件，而不是“打破它的规则”并简单地用 javascript 代码覆盖默认的 href 导航。

所以我建议您将 id 添加回 div 并将匹配的 framgment href 添加到锚点，让 Bootstrap 通过 obj.relatedTarget 属性在“activate.bs.scrollspy”事件中为您提供目标，切换根据需要类，并可选择从导航项中删除“激活”类，使其看起来不像部分相关。如果您有其他部分，请尝试完全使用隐藏锚点或隐藏导航。

当然，我认为最干净的方法是放弃 scrollspy 并使用 window.scrollY 和 $(window).on('scroll', ...)。

查看sn-p：

$(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>

【讨论】：

我的情况不同：链接指向其他页面；该部分有类名 not id。 :)
什么会阻止你在类旁边使用 id？为什么不能像上面显示的那样通过 window.location.href 导航到其他页面？（我发布的 sn-p 就是这样做的）。如果您愿意，您可以为链接使用完全不同的属性，例如“data-link”。