Good day!

The situation is this: there is a menu on the landing page, in which, when the page is scrolled down, the backlight appears on the active menu item. But there is one thing - the backlight immediately disappears after this element is scrolled.

Here is the js, with the help of which it is implemented:

var menu_selector = ".menu-menu-container"; function onScroll(){ var scroll_top = jQuery(document).scrollTop(); jQuery(menu_selector + " a").each(function(){ var hash = jQuery(this).attr("href"); var target = jQuery(hash); if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) { jQuery(menu_selector + " a.active").removeClass("active"); jQuery(this).addClass("active"); } else { jQuery(this).removeClass("active"); } }); }

The question is - can I make it so that after scrolling this item, the backlight on the menu item remains until the next menu item starts? If possible, please give the answer in more detail, because in js (and in jQuery in particular) is not strong.

    1 answer 1

    I am also not strong in jQ, but it is clear that the condition must be changed

     target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top
    • Add the html code - Dmitry Suchotsky