Pavlusha
@Pavlusha
2руререур

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

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

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

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


Пробовал разные способы готовых вариантов, не получается и все тут, подскажите как реализовать пожалуйста
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
whillson
@whillson
помогу, чем смогу ^_^
$(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);
          }
        }
      });
    };
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы