Как сделать активной (другого цвета) строку в боковом навигационном меню при просмотре определённой части страницы?

Question

Как сделать так, чтобы когда на экране находится большая часть контейнера "История, Песня, Стилистика..." , то слева название контейнера в навигационном меню становилось такого-же цвета как при наведении (overlay-text:hover). пример:

body {
  background: black;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  line-height: 1.6;
  color: white;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/*container*/
.container {
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
}

/* intro */
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url("../images/wasureta-website_01.jpg") center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.intro__inner {
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
  text-align: center;
  text-shadow: #000 1px 5px 10px;
  padding-bottom: 50px;
}

.intro__title {
  font-size: 150px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.intro__title::after {
  content: "";
  display: block;
  width: 875px;
  height: 5px;
  margin: 5px auto;
  background-color: #fff;
  box-shadow: #000 1px 5px 10px;
}

/* Styling */
.noformat {
  text-decoration: none;
  color: #fff;
}

li {
  list-style-type: none;
}

li:before {
  content: "";
}

/* Section */
.section {
  padding: 80px;
}

.section__history {
  padding: 50px 0;
  background: url(../images/wasureta-history_02.jpg) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.section__song {
  padding: 50px 0;
  background: url(../images/wasureta-song_04.jpg) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.section__style {
  padding: 50px 0;
  background: url(../images/wasureta-style_02.jpg) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.section__header {
  width: 100%;
  max-width: 1550px;
  margin: 0;
  text-align: left;
  height: 100vh;
}

.section__text {
  text-shadow: #000 1px 1px 7px;
  filter: drop-shadow(1px 1px 5px #000);
}

.section__text-left {
  margin-top: 32px;
  text-shadow: #000 1px 1px 7px;
  filter: drop-shadow(1px 1px 5px #000);
}

.section__text-center {
  font-size: 72px;
  text-shadow: #000 1px 1px 7px;
  filter: drop-shadow(1px 1px 5px #000);
  text-align: center;
  top: 50%;
  vertical-align: middle;
  padding-top: 200px;
}

.section__title {
  text-align: center;
}

.section__title::after {
  content: "";
  display: block;
  width: 220px;
  height: 3px;
  background-color: #d13aff;
  margin: 0 auto 0;
}

/* Overlay */
.overlay {
  vertical-align: middle;
  position: fixed;
  top: 0;
  left: 0;
  width: 15%;
  height: 25%;
  z-index: 10;
  margin: 0;
  font-size: 20px;
  top: 35%;
}

.overlay-new {
  vertical-align: middle;
  position: fixed;
  top: 0;
  left: 0;
  width: 15%;
  height: 25%;
  z-index: 11;
  margin: 0;
  font-size: 18px;
  top: 35%;
  filter: drop-shadow(0px 0px 5px #000);
}

.overlay-text {
  opacity: 100%;
}

.overlay-text:hover {
  filter: drop-shadow(#853aff 0 0 3px);
  text-shadow: #853aff 0 0 3px;
  color: #853aff;
  transition: 0.25s;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="assets/css/style.css" <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap" rel="stylesheet">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
  <div class="intro">
    <div class="container">
      <div class="intro__inner">
        <h1 class="intro__title">Example0</h1>
      </div>
    </div>
  </div>

  <section class="section__history" id="history">
    <div class="container">
      <div class="section__header">
        <h2 class="section__title">История</h2>
        <div class="section__text">
          <p> <b>Example</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum fringilla vulputate. Donec vel ultrices sapien. Aenean in quam ex. In hac habitasse platea dictumst. Donec non tortor justo. Duis ut tellus quis turpis
            feugiat iaculis ultrices et libero. Nullam egestas porta arcu. Sed accumsan purus lorem. Praesent vulputate ipsum maximus, feugiat velit eu, posuere diam.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section__song" id="song">
    <div class="container">
      <div class="section__header">
        <h2 class="section__title">Песня</h2>
        <div class="section__text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum fringilla vulputate. Donec vel ultrices sapien. Aenean in quam ex. In hac habitasse platea dictumst. Donec non tortor justo. Duis ut tellus quis turpis feugiat iaculis ultrices
            et libero. Nullam egestas porta arcu. Sed accumsan purus lorem. Praesent vulputate ipsum maximus, feugiat velit eu, posuere diam.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section__style" id="style">
    <div class="container">
      <div class="section__header">
        <h2 class="section__title">Стилистика</h2>
        <div class="section__text-left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum fringilla vulputate. Donec vel ultrices sapien. Aenean in quam ex. In hac habitasse platea dictumst. Donec non tortor justo. Duis ut tellus quis turpis feugiat iaculis ultrices et
          libero. Nullam egestas porta arcu. Sed accumsan purus lorem. Praesent vulputate ipsum maximus, feugiat velit eu, posuere diam.
        </div>
      </div>
    </div>
  </section>

  <!-- overlay1 -->
  <nav class="noformat overlay-new" id="menu">
    <script>
      // при прокрутке окна (window)
      $(window).scroll(function() {
        // если пользователь прокрутил страницу более чем на 800px
        if ($(this).scrollTop() > 800) {
          // то сделать кнопку scrollup видимой
          $('.overlay-new').fadeIn();
        }
        // иначе скрыть кнопку scrollup
        else {
          $('.overlay-new').fadeOut();
        }
      });
    </script>
      <ul>
        <li><a href="#history" class="noformat overlay-text">История</a></li>
        <li><a href="#song" class="noformat overlay-text">Песня</a></li>
        <li><a href="#style" class="noformat overlay-text">Стилистика</a></li>
      </ul>
  </nav>
  
  <div class="noformat" id="content">
      <section id="history">
      </section>
    <div class="separator"></div>
      <section id="song">
      </section>
    <div class="separator"></div>
      <section id="style">
      </section>
  </div>

  <script>
    $(document).ready(function() {
      $("#menu").on("click", "a", function(event) {
        //отменяем стандартную обработку нажатия по ссылке
        event.preventDefault();
        //забираем идентификатор бока с атрибута href
        var id = $(this).attr('href'),
          //узнаем высоту от начала страницы до блока на который ссылается якорь
          top = $(id).offset().top;
        //анимируем переход на расстояние - top за 750 мс
        $('body,html').animate({
          scrollTop: top
        }, 750);
      });
    });
  </script>
  <!-- overlay2 -->
</body>
</html>

Answer 1

Пожалуйста.

window.addEventListener('scroll', () => {
    let scrollY = window.scrollY;

    document.querySelectorAll('.section').forEach((el, i) => {
        if (el.offsetTop <= scrollY) {
            document.querySelectorAll('.navbar li a').forEach((el) => {
                if (el.classList.contains('active')) {
                    el.classList.remove('active');
                }
            });
            document.querySelectorAll('.navbar li')[i].querySelector('a').classList.add('active');
        }
    })
});

a {
  text-decoration: none;
  color: white;
}

.wrapper {
  max-width: 100%;
  background-color: black;
  display: flex;
}

.sidebar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 300px;
}

.navbar {
  position: fixed;
}

.navbar .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar .menu li a.active {
  color: #9b59b6 !important;
}

.sidebars-wrapper {
  width: 100%;
}

.section {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: white;
  height: 180vh;
  width: 100%;
  padding: 0 20px;
}

.section .header {
  text-align: center;
  margin-top: 20px;
}

<div class="wrapper">
        <div class="sidebar">
            <nav class="navbar">
                <ul class="menu">
                    <li>
                        <a class="active" href="#">Ссылка 1</a>
                    </li>
                    <li>
                        <a href="#">Ссылка 2</a>
                    </li>
                    <li>
                        <a href="#">Ссылка 3</a>
                    </li>
                    <li>
                        <a href="#">Ссылка 4</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="sidebars-wrapper">
            <section class="section">
                <div class="header">
                    Section 1
                </div>
                <span>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore expedita esse sit, ipsam minima,
                    molestiae sunt sint fugiat dolor iusto harum quisquam labore animi eaque doloremque molestias hic
                    quod, voluptate quibusdam consequatur deserunt quos. Tenetur fugiat ex quidem tempora repudiandae
                    animi reprehenderit obcaecati laborum omnis facilis cum, asperiores quas vitae quos saepe cumque
                    expedita eaque odit excepturi provident dolorum perspiciatis? Obcaecati aspernatur, officiis veniam
                    dolores corporis sint beatae provident porro.
                </span>
            </section>
            <section class="section">
                <div class="header">
                    Section 2
                </div>
                <span>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi possimus provident laboriosam
                    cumque voluptatibus natus minima sapiente debitis, tempore corporis quo aperiam consequatur alias,
                    molestias dolorem nisi praesentium tenetur qui dignissimos. Fuga exercitationem voluptatum id!
                </span>
            </section>
            <section class="section">
                <div class="header">
                    Section 3
                </div>
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro unde, maxime pariatur
                    autem, voluptates ratione voluptatibus vel inventore animi facilis error harum consequatur modi ut!
                    Architecto sed aspernatur consequuntur atque inventore omnis, adipisci mollitia reiciendis incidunt
                    qui vel magnam beatae nam amet velit consequatur, rerum eos illum! Aperiam, quod!
                </span>
            </section>
            <section class="section">
                <div class="header">
                    Section 4
                </div>
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum voluptates eaque dicta
                    pariatur quas quasi ipsam repudiandae repellat impedit.
                </span>
            </section>
        </div>
    </div>

БЛОГ НА HUSL

Как сделать активной (другого цвета) строку в боковом навигационном меню при просмотре определённой части страницы?

Ответы (1 шт):