Выделение пункта меню, когда идентификатор находится в области просмотра - PullRequest
Новая
       14

Выделение пункта меню, когда идентификатор находится в области просмотра

0 голосов
/ 05 декабря 2018

Я пытаюсь выделить пункты меню, когда соответствующий идентификатор достигает верхней части страницы, но я не могу заставить код работать.Я думаю, что знаю проблему - но я не знаю, как ее исправить.

Я думаю, что проблема в последней строке, где добавляется идентификатор для ссылки.Проблема в том, что у моей ссылки есть имя страницы, а не только знак «#», поэтому он не совпадает, когда достигает верхней части страницы.

Так как мне сказать добавить идентификатор после #, но сохранить ссылкутекст перед ним (который будет отличаться каждый раз)? 

$('.navDropdownList a').on('click', function() {
	'use strict';
    $(this).find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
	'use strict';
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).position().top) {
            var id = $(this).attr('id');
            $('.navDropdownList a').removeClass('active');
            $('.navDropdownList a[href=#'+ id +']').addClass('active');
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="navDropdownList">
  <li><a class="closeMobNav" href="thisIsThePage.html#section-1">Link text</a></li>
  <li><a class="closeMobNav" href="thisIsAnotherPage.html#section-2">Link text</a></li>
  <li><a class="closeMobNav" href="yetAnotherPage.html#section-3"><span>3.1</span>Link text</a></li>
</ul>


<section>
  <h2 class="target" id="section-1">Title</h2>
  <p>blar blar blar</p>
</section>
<section>
  <h2 class="target" id="section-2">Title</h2>
  <p>blar blar blar</p>
</section>
<section>
  <h2 class="target" id="section-3">Title</h2>
  <p>blar blar blar</p>
</section>
...