当相应的部分在屏幕上时，将class active添加到li中

提问者：小点点

当相应的部分在屏幕上时，将class active添加到li中

我只有一页。我页面上有四个小节。当在底部滚动相应的部分时，我必须将active类添加到菜单上的li标记中。例如，如果about us部分在屏幕上，那么将class active添加到li标记中。如果gallery部分在屏幕上，那么添加active class并从前面的LI中删除active class。

我必须改变颜色和添加底部边框到活动菜单列表。我不想用任何插件。

这是一个例子。它将添加active类并更改导航列表https://blackrockdigital.github.io/startbootstrap-scrolling-nav/的颜色

有可能使用jQuery吗？

null

$(function() {
  $('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});

body {
  margin: 0;
  padding: 0;
}

.headerMenu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #d9a6a6;
}

.anchorLinks ul {
  list-style: none;
}

.anchorLinks ul li {
  display: inline-block;
  margin: 15px;
}

.anchorLinks ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.anchorLinks ul li.active a {
  color: #ffef00;
  border-bottom: 1px solid #000;
}

.WrapperInner {
  margin-top: 80px;
  margin-bottom: 80px;
}

section {
  height: 400px;
  padding: 40px;
}

section p {
  color: #fff;
}

.aboutus {
  background-color: #ec7063;
}

.service {
  background-color: #a569bd;
}

.gallery {
  background-color: #5dade2;
}

.contactus {
  background-color: #2ecc71;
}

<div class="Wrapper">
  <div class="mainInner bg_white">
    <div class="linkWrappers">
      <header class="headerMenu">
        <div class="anchorLinks smothscrollclass">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="#aboutus">About</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contactus">Contact</a></li>
          </ul>
        </div>
      </header>

    </div>

    <div class="WrapperInner ">
      <section class="aboutus" id="aboutus">
        <h2>About us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="service" id="service">
        <h2>Service</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      </section>
      <section class="gallery" id="gallery">
        <h2>Gallery</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="contactus" id="contactus">
        <h2>Contact us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

null

共3个答案

匿名用户

对于纯js，您需要使用document.body.scrolltop；来定义滚动了多少，然后从所有li-s中删除样式active，并添加到当前或只是手动为每一个删除以前的（让i=0；i<；liclass.length；i++){liclass[i].classlist.remove（“active”）}，然后添加到当前目标，通过ID或唯一类将其作为目标，对我来说很好，jQuery是相同的，只是$（“body”）。scrolltop（）

匿名用户

我升级了一点，现在一切都很清晰；）

对于滚动，我使用纯html，只需向要滚动的元素添加ID，然后添加

正如您所要求的那样，我对jQuery所做的类

null

$(document).ready(()=>{
  $("a").click((e)=>{
    //Removes class active from all a-s
    $("a").removeClass("active");
    //Adds only to clicked one
    $(e.target).addClass("active");
  })
})

/*This is for smooth scrolling*/
html {
  scroll-behavior: smooth;
}
.big {
  height: 500px;
  width: 100%;
  border: solid black 1px;
}
.active {
color:red;
}

<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contacts">Contacts</a>

<div class="big" id ="home">Home</div>
<div class="big" id ="about">About us</div>
<div class="big" id ="contacts">Contacts</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

匿名用户

我在这里做的是一个名为activateLink的函数，我给链接一个ID，然后点击链接，我在jquery的帮助下向那个特定的li添加一个活动类

null

$(function() {
  $('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});

function activateLink (link,section) {
if(section){
    $('html, body').animate({
        'scrollTop' : $("#"+section).position().top
    },function(){    
       $( ".active" ).removeClass( "active" )
       $("#"+link).addClass("active");
    });
}else{
 $( ".active" ).removeClass( "active" )
 $("#"+link).addClass("active")
 
}
 
}

function checkSectionExistance (sectionId,linkId) {
 var element = document.querySelector('#'+sectionId);
	var position = element.getBoundingClientRect();

// checking for partial visibility
	if(position.top < window.innerHeight && position.bottom >= 0) {
			$( ".active" ).removeClass( "active" )
 $("#"+linkId).addClass("active")
	}
}

window.addEventListener('scroll', function() {
	
  checkSectionExistance('aboutus','about-link')
  checkSectionExistance('service','service-link')
  checkSectionExistance('gallery','gallery-link')
  checkSectionExistance('contactus','contact-link')
  
     
  
	
});

body {
  margin: 0;
  padding: 0;
}

.headerMenu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #d9a6a6;
}

.anchorLinks ul {
  list-style: none;
}

.anchorLinks ul li {
  display: inline-block;
  margin: 15px;
}

.anchorLinks ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.anchorLinks ul li.active a {
  color: #ffef00;
  border-bottom: 1px solid #000;
}

.WrapperInner {
  margin-top: 80px;
  margin-bottom: 80px;
}

section {
  height: 400px;
  padding: 40px;
}

section p {
  color: #fff;
}

.aboutus {
  background-color: #ec7063;
}

.service {
  background-color: #a569bd;
}

.gallery {
  background-color: #5dade2;
}

.contactus {
  background-color: #2ecc71;
}
a{
cursor:pointer
}
.active {
border-bottom:1px solid white
}

<div class="Wrapper">
  <div class="mainInner bg_white">



    <div class="linkWrappers">
      <header class="headerMenu">
        <div class="anchorLinks smothscrollclass">
          <ul>
            <li><a id='home-link' onclick="activateLink('home-link')">Home</a></li>
            <li><a id='about-link' onclick="activateLink('about-link','aboutus')" >About</a></li>
            <li><a id='service-link' onclick="activateLink('service-link','service')" >Service</a></li>
            <li><a id='gallery-link' onclick="activateLink('gallery-link','gallery')" >Gallery</a></li>
            <li><a id='contact-link' onclick="activateLink('contact-link','contactus')" >Contact</a></li>
          </ul>
        </div>
      </header>

    </div>

    <div class="WrapperInner ">
      <section class="aboutus" id="aboutus">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="service" id="service">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      </section>
      <section class="gallery" id="gallery">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="contactus" id="contactus">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>