javascript - Bootstrap 4 网站错误：使用自定义数据属性将类从部分传递到导航栏不起作用

Question

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

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

我找到了一个解决这个问题的简单方法：我使用data-navbar-classes带有其中一个值的自定义数据属性，navbar-light bg-light并将navbar-dark bg-dark2 个类从部分传递到导航栏，因为部分到达页面顶部。

脚本中有一个错误，我找不到它：

var toggleNavbarClasses = function() {
  var navbarHeight = $('.navbar').outerHeight(),
    classChangeTrigger = navbarHeight / 2;
  $('.page-section').each(function() {
    var $pageSection = $(this),
      pageSectionClasses = $pageSection.data('navbar-classes'),
      fromTop = $pageSection.offset().top;
    if (fromTop < classChangeTrigger && fromTop >= 0) {
      $('nav.navbar').removeClass('bg-dark navbar-dark')
        .addClass(pageSectionClasses);
    }
  });
};
$(window).scroll(toggleNavbarClasses);
//toggleNavbarClasses();

.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">

<nav class="navbar navbar-expand-sm navbar-dark bg-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 data-navbar-classes="navbar-dark bg-dark" 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 data-navbar-classes="navbar-light bg-light" 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>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum perferendis totam delectus quas earum ea labore, deserunt placeat sit, amet veritatis, saepe itaque! Velit vitae accusantium maiores corrupti cupiditate!</p>
</div>
<div data-navbar-classes="navbar-dark bg-dark" 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>
<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>

我的错误在哪里？

标签： javascriptjquerytwitter-bootstrapscroll

Answer 1

如果我正确理解您的问题，您应该找出navbar所在的部分，然后确定class它的位置。

但是在您的代码中，唯一满足的情况fromTop < classChangeTrigger && fromTop >= 0是第一个page-section，因为其他情况fromTop总是大于classChangeTrigger.

navbar在这种情况下，您可以通过计算outerHeight和和电流来简单地找出位于哪个部分offset().top，如下所示：page-sectionscrollTop

var toggleNavbarClasses = function() {
  var navbarHeight = $('.navbar').outerHeight(),
    classChangeTrigger = navbarHeight / 2;
  $('.page-section').each(function() {
    var $pageSection = $(this),
      pageSectionClasses = $pageSection.data('navbar-classes'),
      fromTop = $pageSection.offset().top;
      height = $pageSection.outerHeight();
      scrollTop = document.documentElement.scrollTop;
      if(scrollTop>=fromTop && scrollTop <= (fromTop+height)){
        $('nav.navbar').removeClass('bg-dark navbar-dark navbar-light bg-light').addClass(pageSectionClasses);
      }
  });
};
$(window).scroll(toggleNavbarClasses);

.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">

<nav class="navbar navbar-expand-sm navbar-dark bg-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 data-navbar-classes="navbar-dark bg-dark" 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 data-navbar-classes="navbar-light bg-light" 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>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum perferendis totam delectus quas earum ea labore, deserunt placeat sit, amet veritatis, saepe itaque! Velit vitae accusantium maiores corrupti cupiditate!</p>
</div>
<div data-navbar-classes="navbar-dark bg-dark" 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>
<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>