javascript - 使用javascript滚动时，如何使导航栏中的当前书签菜单自动突出显示？

Question

我是 javascript 的新手 我正在尝试使菜单在用户滚动到书签页面时突出显示。如果可能，请为已添加书签的页面编写平滑滚动代码。

我的 HTML:

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav ml-auto aw-menu">
        <li class="nav-item item"><a class="nav-link" href="#index.html">Home</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Updates</a></li>
        <li class="nav-item item"><a class="nav-link" href="#about">About us</a></li>
        <li class="nav-item item"><a class="nav-link" href="#course">Courses</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Cells</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Library</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Placements</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Contact-us</a></li>
      </ul>
    
  </div>

我的 CSS:

.active{
    background-color: #64b3f4;
    font-weight: 300;
    color: white;
    border: 2px; 
}

我的javascript:

$(window).on("scroll", function() {
  var currentPos = $(window).scrollTop();

  $('.nav li a').each(function() {
    var sectionLink = $(this);
    // capture the height of the navbar
    var navHeight = $('.aw-menu').outerHeight() + 1;
    var section = $(sectionLink.attr('href'));

    // subtract the navbar height from the top of the section
    if(section.position().top - navHeight  <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
      $('.nav li').removeClass('active');
      sectionLink.parent().addClass('active');
    } else {
      sectionLink.parent().removeClass('active');
    }
  });        
});

Answer 1

您使用的是 jQuery，而不是纯 JavaScript。我之前做过类似你问题的事情。请看。

function setScrolls() {
  $('#navbarSupportedContent a[href*="#"]:not([href="#"])').each(function(e) {
    let desiredId = $.attr(this, 'href').split('#')[1]; //get the test right from #
    let desidedOffset = $('#' + desiredId).offset().top;
    let windowTop = $(window).scrollTop();
    // set acitve class to 'li' when ve get to desiredId block - 50px
    if (desidedOffset - 50 < windowTop) {
      $(this).parent().addClass('active');
    } else {
      $(this).parent().removeClass('active');
    }
  });
  // counting the numbert of .active li
  let activeLenght = $('#navbarSupportedContent .active').length;
  // set a.cuttent for the last li.active
  if (activeLenght > 0) {
    $('#navbarSupportedContent .active a').removeClass('current');
    $('#navbarSupportedContent .active:eq('+(activeLenght-1)+')').find('a').addClass('current');
  }
}

$(document).ready(function($) {
  setScrolls();
});

$(window).on("scroll", function() {
  setScrolls();
});

// smooth scroll to desired element
$('#navbarSupportedContent a[href*="#"]').click(function(e) {
  let target = $(this).attr('href').split('#')[1];
  if ($('#' + target).length) {
    $('html, body').animate({
      scrollTop: $('#' + target).offset().top
    }, 800);
    return false;
  }
});

/* Just an example */
#navbarSupportedContent {
  position: fixed;
  left: 100px;
}

#test1 {
  height: 1000px;
  background: green;
}

#test2 {
  height: 1000px;
  background: cyan;
}

#navbarSupportedContent li.active a.current {
  color: #fab405;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="navbar-collapse" id="navbarSupportedContent">
  <ul class="nav navbar-nav ml-auto aw-menu">
    <!--<li class="nav-item item"><a class="nav-link" href="#index.html">Home</a></li>-->
    <!-- link like this will cause the error -->
    <li class="nav-item item"><a class="nav-link" href="#test1">Home</a></li>
    <li class="nav-item item"><a class="nav-link" href="#test2">Updates</a></li>
  </ul>
</div>

<div id="test1">test1</div>

<div id="test2">test2</div>

---

已更新

稍微重写了 setScrolls() 函数。现在可以使用了。

function setScrolls() {
  $('#navbarSupportedContent a[href*="#"]:not([href="#"])').each(function(e) {
    let desiredId = $.attr(this, 'href').split('#')[1]; //get the test right from #
    let desidedOffset = $('#' + desiredId).offset().top;
    let windowTop = $(window).scrollTop();
    // set acitve class to 'li' when ve get to desiredId block - 50px
    if (desidedOffset - 50 < windowTop) {
      $(this).parent().addClass('active');
    } else {
      $(this).parent().removeClass('active');
    }
  });
  // counting the numbert of .active li
  let activeLenght = $('#navbarSupportedContent .active').length;
  // set a.cuttent for the last li.active
  if (activeLenght > 0) {
    $('#navbarSupportedContent .active a').removeClass('current');
    $('#navbarSupportedContent .active:eq('+(activeLenght-1)+')').find('a').addClass('current');
  }

并且不要使用#index.html 或类似#xxx.xxx 的内容。这可能会导致错误。