Добавить активный класс в li, когда соответствующий раздел находится на экране

Question

У меня одна страница. На моей странице минимум четыре раздела. Мне нужно добавить класс active к тегу li в меню при прокрутке внизу соответствующего раздела. Например, если на экране отображается раздел о нас, добавьте класс active в тег li. Если раздел галереи находится на экране, добавьте активный класс и удалите активный класс из предыдущего li.

Мне нужно изменить цвет и добавить нижнюю границу в список активного меню. Я не хочу использовать какие-либо плагины.

Это пример. Он добавляет активный класс и меняет цвет списка навигации https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

Можно ли использовать jQuery?

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

Answer 1

привет, следуйте приведенному ниже фрагменту, что я здесь делаю, это одна функция, называемая activateLink , и я дал идентификатор для ссылок и щелкнув ссылку, я добавил активный класс к этому конкретному li с помощью jquery

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

дайте мне знать, если это поможет

Answer 2

Я немного обновил, теперь все предельно ясно;)

Для скроллов я использовал чистый html просто добавляю ID к элементу, который нужно прокрутить, и добавляю <a href="#theIdOfElement">

классы, которые я делал с jQuery, как вы просили

2nd EDIT:

let  x=0;
$(document).ready(()=>{
  $("a").click((e)=>{
    //Removes class active from all a-s and all divs
    $("a").removeClass("active");
    $("div").removeClass("active");
    //Adds only to clicked one
    $(e.target).addClass("active");
    
    //Adds class active to divs that contain the text on which you clicked
    $("div:contains("+ $(e.target).text() +")").addClass("active");
  });
$(document).scroll(()=>{
    $("p").text( $(document).scrollTop());
        if($(document).scrollTop() >= 970){
        //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#contacts").addClass("active");
  }
      else if($(document).scrollTop() >= 508){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#about").addClass("active");
  }
  else if($(document).scrollTop() >= 8){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#home").addClass("active");
  }


  });
})

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

<div id="main">
<div style="position:fixed;display:flex;justify-content:flex-end;width:100%">
  <p id="demo">0</p>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contacts">Contacts</a>
</div>
<div class="big" id ="home">Home</div>
<div class="big" id ="about">About Us</div>
<div class="big" id ="contacts">Contacts</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  

Answer 3

с чистым js вам нужно использовать document.body.scrollTop;, чтобы определить, сколько было прокручено, затем удалить активный стиль со всех li-s и добавить к текущему или просто вручную для каждого удалить предыдущий for(let i = 0;i<liClass.length;i++){liClass[i].classList.remove("active")}, затем добавить к текущий таргетинг на него по идентификатору или уникальному классу, отлично работает для меня, поскольку jQuery то же самое, только $("body").scrollTop()