Изменение цвета ссылок меню в зависимости от прокрутки экрана до якоря

Question

Не могу привязать событие прокрутки до якоря с изменением цвета ссылки для пункта меню, к которому приписан этот якорь.

 <ul class="r_menu">
        <li><a href="#sroll_target_1">пункт меню 1</a></li>
        <li><a href="#sroll_target_2">пункт меню 2</a></li>
        <li><a href="#sroll_target_3">пункт меню 3</a></li>
        <li><a href="#sroll_target_4">пункт меню 4</a></li>
    </ul>
<div id="sroll_target_1">Контент......</div>
<div id="sroll_target_2">Контент......</div>
<div id="sroll_target_3">Контент......</div>
<div id="sroll_target_4">Контент......</div>

Есть скрипт который производит плавную прокрутку и меняет цвет кликнутой ссылки меню через контекст

//Прокрутка по якорям
$('a[href*=#]').bind("click", function(e) {
        $('a[href*=#]').removeClass('current');
        $(this).addClass('current');
    var anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top -150
    }, 700);
    e.preventDefault();
});

Нужно что то подобное, но с "обратным действием", пользователь докрутил до якоря и цвет ссылки меню с таким же айдишником изменился.

Что то вроде:

    $(window).scroll(function() {
    var scroll_anchor = $('контекст').offset().top;
    if ($(this).scrollTop() > scroll_anchor) {
        $('ссылка связанного пункта').addClass('current');
 
    } else {
        $('ссылка связанного пункта').removeClass('current');
    }
});

Answer 1

можно сделать чтото вроде этого

$( 'a[href*="#"]' ).on( 'click', function( e ) {
    e.preventDefault();

    $( 'html, body' ).stop().animate( {
        scrollTop: $( $( this ).attr('href') ).offset().top - 150
    }, 700);
} );

$( window ).on( 'scroll', function () {
    $( 'div[id*="sroll_target"]' ).each( function() {
        let $currentItem = $( this );

        if ( $currentItem.offset().top >= pageYOffset ) {
            $( 'a[href="#' + $currentItem.attr( 'id' ) + '"]').addClass( 'current' )
                .parent().siblings().find('a').removeClass('current');

            return false;
        }
    } );
} );

БЛОГ НА HUSL

Изменение цвета ссылок меню в зависимости от прокрутки экрана до якоря

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