Активный пункт меню при пролистывании лендинга?

Question

[...]

Здравствуйте! Никак не получается сделать что бы при пролистывании к блоку стал активным пункт меню

Имеем такую структуру у меню

<ul id="menu-glavnoe" class="navbar-nav">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-12 current_page_item menu-item-20 nav-item">
<a class="nav-link" href="/" aria-current="page">Главная</a>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21 nav-item">
<a class="nav-link" href="#catalog">Каталог</a>
</li>
</ul>

соответственно по нажатию на каталог нас кидает к нему, пролистывает, чуть ниже заголовка где указан его id

<div id="catalog" class="section_tittle">
						<h2>Каталог продукции</h2>
                        <p>Противопожарные конструкции и огнеупорное стекло</p>
                    </div>

Пробовал разные способы готовых вариантов, не получается и все тут, подскажите как реализовать пожалуйста

Answer 1

[Alexey Moloko]

$(function() {
    var onScroll;
    onScroll = function(e) {
      var $nav_items, active_cls, scrollPos;
      scrollPos = $(document).scrollTop() + 91;
      $nav_items = $('.menu-box').find('.link');
      active_cls = '-active';
      return $nav_items.each(function() {
        var $refElement, refElement_height;
        $refElement = $($(this).attr('href'));
        refElement_height = $refElement.height() + parseInt($refElement.css('paddingBottom')) + parseInt($refElement.css('paddingTop'));
        if ($refElement.length) {
          if ($refElement.offset().top <= scrollPos && $refElement.offset().top + refElement_height > scrollPos) {
            $nav_items.removeClass(active_cls);
            return $(this).addClass(active_cls);
          } else {
            return $(this).removeClass(active_cls);
          }
        }
      });
    };

Comments

[...]

Добавил, но он даже класс не прибавляет к меню

[Alexey Moloko]

..., вот так у меня реализована плавная прокрутка и применение класса к ссылке:

<div class="container">
  <ul class="menu-box">
    <li class="item"><a href="#test1" class="link">1 item</a></li>
    <li class="item"><a href="#test2" class="link">2 item</a></li>
  </ul>
</div>

<script>
  $(function() {
    var onScroll;
    onScroll = function(e) {
      var $nav_items, active_cls, scrollPos;
      scrollPos = $(document).scrollTop() + 91;
      $nav_items = $('.menu-box').find('.link');
      active_cls = '-active';
      return $nav_items.each(function() {
        var $refElement, refElement_height;
        $refElement = $($(this).attr('href'));
        refElement_height = $refElement.height() + parseInt($refElement.css('paddingBottom')) + parseInt($refElement.css('paddingTop'));
        if ($refElement.length) {
          if ($refElement.offset().top <= scrollPos && $refElement.offset().top + refElement_height > scrollPos) {
            $nav_items.removeClass(active_cls);
            return $(this).addClass(active_cls);
          } else {
            return $(this).removeClass(active_cls);
          }
        }
      });
    };
    $(document).on('scroll', onScroll);
    $('.menu-box').find('.link').click(function(e) {
      var $item, $nav, href, navHeight;
      e.preventDefault();
      $(document).off('scroll');
      $item = $(e.target);
      $item.addClass('-active');
      $item.parent().siblings().find('.link').removeClass('-active');
      href = $item.attr('href');
      $nav = $('.container');
      navHeight = $nav.height() + parseInt($nav.css('paddingTop')) + parseInt($nav.css('paddingBottom'));
      return $('html, body').animate({
        scrollTop: $(href).offset().top - navHeight
      }, 1000, 'swing', function() {
        return $(document).on('scroll', onScroll);
      });
    });
  });
  </script>

[...]

Alexey Moloko, бесполезно, вообще у меню 0 реакции, вставил свои классы уже

<script>
  $(function() {
    var onScroll;
    onScroll = function(e) {
      var $nav_items, active_cls, scrollPos;
      scrollPos = $(document).scrollTop() + 91;
      $nav_items = $('.navbar-nav').find('.nav-link');
      active_cls = '-active';
      return $nav_items.each(function() {
        var $refElement, refElement_height;
        $refElement = $($(this).attr('href'));
        refElement_height = $refElement.height() + parseInt($refElement.css('paddingBottom')) + parseInt($refElement.css('paddingTop'));
        if ($refElement.length) {
          if ($refElement.offset().top <= scrollPos && $refElement.offset().top + refElement_height > scrollPos) {
            $nav_items.removeClass(active_cls);
            return $(this).addClass(active_cls);
          } else {
            return $(this).removeClass(active_cls);
          }
        }
      });
    };
    $(document).on('scroll', onScroll);
    $('.navbar-nav').find('.nav-link').click(function(e) {
      var $item, $nav, href, navHeight;
      e.preventDefault();
      $(document).off('scroll');
      $item = $(e.target);
      $item.addClass('-active');
      $item.parent().siblings().find('.link').removeClass('-active');
      href = $item.attr('href');
      $nav = $('.container');
      navHeight = $nav.height() + parseInt($nav.css('paddingTop')) + parseInt($nav.css('paddingBottom'));
      return $('html, body').animate({
        scrollTop: $(href).offset().top - navHeight
      }, 1000, 'swing', function() {
        return $(document).on('scroll', onScroll);
      });
    });
  });
  </script>

[...]

$(function()
Uncaught TypeError: $ is not a function
ошибку отдает

[Alexey Moloko]

..., накидал для примера, просто вставьте в новый файл для теста и подправите под себя.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div class="container" style="position: fixed;top: 0;left: 0;">
      <ul class="menu-box">
        <li class="item"><a href="#test1" class="link">1 item</a></li>
        <li class="item"><a href="#test2" class="link">2 item</a></li>
      </ul>
    </div>
    <div id="test1" style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div id="test1" style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div id="test2" style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div  style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
    <div style="margin: 100px ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate beatae excepturi porro quibusdam animi ea enim, esse aliquid laboriosam sapiente accusamus quis, eos architecto! Ratione praesentium eos fugit maxime est facere, exercitationem, quam numquam rerum soluta assumenda mollitia quas molestias iusto, velit facilis. Deleniti error veritatis beatae numquam culpa at repellat, quis quibusdam eligendi hic rerum odit, enim quae ad aut sunt aliquid? Beatae optio, cumque saepe possimus dolor ullam blanditiis voluptatem assumenda ipsum, nesciunt nobis voluptate. Et, repudiandae eveniet suscipit dolore aliquam. Sed saepe non aperiam beatae nemo perspiciatis nam, sapiente quis maxime impedit rerum esse amet unde nobis?</div>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(function() {
    var onScroll;
    onScroll = function(e) {
    var $nav_items, active_cls, scrollPos;
    scrollPos = $(document).scrollTop() + 91;
    $nav_items = $('.menu-box').find('.link');
    active_cls = '-active';
    return $nav_items.each(function() {
    var $refElement, refElement_height;
    $refElement = $($(this).attr('href'));
    refElement_height = $refElement.height() + parseInt($refElement.css('paddingBottom')) + parseInt($refElement.css('paddingTop'));
    if ($refElement.length) {
    if ($refElement.offset().top <= scrollPos && $refElement.offset().top + refElement_height > scrollPos) {
    $nav_items.removeClass(active_cls);
    return $(this).addClass(active_cls);
    } else {
    return $(this).removeClass(active_cls);
    }
    }
    });
    };
    $(document).on('scroll', onScroll);
    $('.menu-box').find('.link').click(function(e) {
    var $item, $nav, href, navHeight;
    e.preventDefault();
    $(document).off('scroll');
    $item = $(e.target);
    $item.addClass('-active');
    $item.parent().siblings().find('.link').removeClass('-active');
    href = $item.attr('href');
    $nav = $('.container');
    navHeight = $nav.height() + parseInt($nav.css('paddingTop')) + parseInt($nav.css('paddingBottom'));
    return $('html, body').animate({
    scrollTop: $(href).offset().top - navHeight
    }, 1000, 'swing', function() {
    return $(document).on('scroll', onScroll);
    });
    });
    });
    </script>
    <style>
    .-active{
    background-color: #333;
    }
    ul > li{
    display: inline-block;
    }
    </style>
  </body>
</html>

[...]

Alexey Moloko, спасибо за помощь, гиблое это дело ) пожалуй проще забить ))

[Alexey Moloko]

..., ну почему же) Посмотрите на то что я скинул и вставьте свои классы, jquery также необходим.