当页面使用 id 滚动时如何更改菜单的活动类

Question

我已经做了一个具有视差样式的自定义菜单。菜单固定在顶部，我想在页面滚动时更改菜单的活动类。我通过单击功能完成了它，因此通过单击菜单，活动类更改为该特定菜单。我用 id 不是'href="#home"' 创建了这个菜单。我找到的大部分代码都是由 href="#" 和 nav 完成的。我不希望菜单与导航导航栏相同。那么可以通过id来完成吗？

我的代码如下

  $("#home-btn").on('click',function() {
		$('html, body').animate({
			scrollTop : $("#home").offset().top - 10
		}, 1000);
		$('.main-menu ul li').removeClass('active');
		$('#home-btn').parent().addClass('active');
	});
	
	$("#service-btn").on('click',function() {
		$('html, body').animate({
			scrollTop : $("#service").offset().top - 45
		}, 1000);
		$('.main-menu ul li').removeClass('active');
		$('#service-btn').parent().addClass('active');
	});
	
	$("#about-btn").on('click',function() {
		$('html, body').animate({
			scrollTop : $("#about").offset().top - 120
		}, 1000);
		$('.main-menu ul li').removeClass('active');
		$('#about-btn').parent().addClass('active');
	});
	
	$("#contact-btn").on('click',function() {
		$('html, body').animate({
			scrollTop : $("#contact").offset().top - 120
		}, 2000);
		$('.main-menu ul li').removeClass('active');
		$('#contact-btn').parent().addClass('active');
	});

.top-adj {
  margin-top: 130px;
}

.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f1f1f1;
}

.main-menu ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main-menu ul li {
	display: block;
	font-weight: 600;
	margin-left: 25px;
}

.main-menu ul li:first-child {
	margin-left: 0px;
}

.main-menu ul li a {
	color: #000;
	display: block;
	cursor: pointer;
	padding: 25px 10px;
	position: relative;
	border-bottom: 4px solid;
	border-color: transparent;
}

.main-menu ul li a:hover {
	text-decoration: none;
}

.main-menu ul li.active a {
	padding: 25px 10px;
	border-bottom: 4px solid #104377;
}

.section {
  width: 100%;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="main-menu">
   <ul>
       <li class="active"><a id="home-btn">Home</a></li>
         <li><a id="service-btn">Services</a></li>
         <li><a id="about-btn">About</a></li>
         <li><a id="contact-btn">Contact</a></li>
    </ul>
 </div>

<div class="top-adj"></div>
<div class="section" id="home">Home</div>
<div class="section" id="service">Service</div>
<div class="section" id="about">About</div>
<div class="section" id="contact">Contact</div>

Answer 1

这是上面注释的编辑代码。

(function () {
  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function (e) {
      sections[e.id] = e.offsetTop;
  });

  window.onscroll = function () {
      var scrollPosition = document.documentElement.scrollTop ||
          document.body.scrollTop;

      for (i in sections) {
          if (sections[i] <= scrollPosition) {
              $('.nav-item').parent().removeClass('active');
              document.querySelector('a[id*=' + i +
                  ']').parentElement.setAttribute('class', 'active');
          }
      }
  };

  // Your code
  $("#home-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#home").offset().top
      }, 1000);
  });

  $("#service-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#service").offset().top
      }, 1000);
  });

  $("#about-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#about").offset().top
      }, 1000);
  });

  $("#contact-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#contact").offset().top
      }, 2000);
  });
})();

.top-adj {
  margin-top: 40px;
}

.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f1f1f1;
}

.main-menu ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-menu ul li {
  display: block;
  font-weight: 600;
  margin-left: 25px;
}

.main-menu ul li:first-child {
  margin-left: 0px;
}

.main-menu ul li a {
  color: #000;
  display: block;
  cursor: pointer;
  padding: 4px 10px;
  position: relative;
  border-bottom: 4px solid;
  border-color: transparent;
  text-decoration: none;
}

.main-menu ul li a:hover {
  text-decoration: none;
}

.main-menu ul li.active a {
  padding: 4px 10px;
  border-bottom: 4px solid #104377;
}

.section {
  width: 100%;
  height: 100vh;
  padding-top:40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
   <ul>
     <li><a class="nav-item" id="home-btn">Home</a></li>
     <li><a class="nav-item" id="service-btn">Services</a></li>
     <li><a class="nav-item" id="about-btn">About</a></li>
     <li><a class="nav-item" id="contact-btn">Contact</a></li>
    </ul>
 </div>

<div class="top-adj"></div>
<div class="section" id="home">Home</div>
<div class="section" id="service">Service</div>
<div class="section" id="about">About</div>
<div class="section" id="contact">Contact</div>

Answer 2

这里我们使用 Vanilla JavaScript 的 querySelectorAll 方法选择了所有元素。

您可以了解更多关于Array.prototype.forEach.call() function here 的信息。

我们已经使用window.onscroll 事件来执行我们的滚动侦测，其中我们将每个部分的顶部偏移量与窗口的滚动位置相匹配，并基于它添加了类。

(function () {
  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function (e) {
      sections[e.id] = e.offsetTop;
  });

  window.onscroll = function () {
      var scrollPosition = document.documentElement.scrollTop ||
          document.body.scrollTop;

      for (i in sections) {
          if (sections[i] <= scrollPosition) {
              document.querySelector('.active').setAttribute('class', ' ');
              document.querySelector('a[id*=' + i +
                  ']').parentElement.setAttribute('class', 'active');
          }
      }
  };

  // Your code
  $("#home-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#home").offset().top
      }, 1000);
  });

  $("#service-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#service").offset().top
      }, 1000);
  });

  $("#about-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#about").offset().top
      }, 1000);
  });

  $("#contact-btn").on('click', function () {
      $('html, body').animate({
          scrollTop: $("#contact").offset().top
      }, 2000);
  });
})();

.top-adj {
  margin-top: 130px;
}

.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f1f1f1;
}

.main-menu ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-menu ul li {
  display: block;
  font-weight: 600;
  margin-left: 25px;
}

.main-menu ul li:first-child {
  margin-left: 0px;
}

.main-menu ul li a {
  color: #000;
  display: block;
  cursor: pointer;
  padding: 25px 10px;
  position: relative;
  border-bottom: 4px solid;
  border-color: transparent;
  text-decoration: none;
}

.main-menu ul li a:hover {
  text-decoration: none;
}

.main-menu ul li.active a {
  padding: 25px 10px;
  border-bottom: 4px solid #104377;
}

.section {
  width: 100%;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
   <ul>
     <li class="active"><a id="home-btn">Home</a></li>
     <li><a id="service-btn">Services</a></li>
     <li><a id="about-btn">About</a></li>
     <li><a id="contact-btn">Contact</a></li>
    </ul>
 </div>

<div class="top-adj"></div>
<div class="section" id="home">Home</div>
<div class="section" id="service">Service</div>
<div class="section" id="about">About</div>
<div class="section" id="contact">Contact</div>

我希望这会有所帮助。