Question

我正在Bootstrap 4中的一个网站上工作，该网站的各个部分具有浅色和深色背景以及固定的导航栏。

导航栏是深色的（具有css类Particle::Particle(double mass, double charge, double posX, double posY, double posZ) : m_mass(mass), m_charge(charge), m_posX(posX), m_posY(posY), m_posZ(posZ) {} Electron::Electron(double PosX, double PosY, double PosZ) : Particle(9.109E-31, -1.602E-19, PosX, PosY, PosZ){} Proton::Proton(double PosX, double PosY, double PosZ) : Particle(9.109E-31, +1.602E-19, PosX, PosY, PosZ){}），尽管在浅色部分很容易看到，但与深色的却无法区分。

当用户到达暗区（ solution 之前，我尝试将导航栏的bg-dark更改为navbar-dark bg-dark在StackOverflow上建议）：

navbar-light bg-light

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

正如您所看到的，我使用了scroll-spy，但打破了规则（该状态要求锚点“指向具有id的元素”）：我的导航栏项指向其他网站页面，不是到当前页面的各个部分。

与上述情况相符的替代方案是什么？

Answer 1

我认为我更容易正确地利用Bootstrap scrollspy的“ activate.bs.scrollspy”事件，而不是“违反规则”，而只需使用JavaScript代码覆盖默认的href导航。

因此，我建议您将ID添加回div，将匹配的fragment hrefs添加回锚，让Bootstrap通过obj.relatedTarget属性在“ activate.bs.scrollspy”事件中为您提供目标，然后切换类别，并根据需要从导航项中删除“已激活”的类别，因此不会出现与各节相关的内容。如果您还有其他部分，请尝试完全使用隐藏的锚点或隐藏的导航栏。

当然，我认为最干净的方法是抛弃卷轴并使用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>

更改固定的导航栏的类，具体取决于它所徘徊的页面部分的背景

1 个答案: