.menu-item.active { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }\$(document).ready(function() { var menuItems = \$('.menu-item'); var sections = \$('[name]'); function setActive() { var scrollPos = \$(window).scrollTop(); var activeSection = ''; sections.each(function() { var offset = \$(this).offset().top; if (scrollPos >= offset - 100) activeSection = \$(this).attr('name'); }); menuItems.each(function() { var href = \$(this).find('a').attr('href') || ''; if (href.indexOf('#' + activeSection) > -1) { \$(this).addClass('active'); } else { \$(this).removeClass('active'); } }); } setActive(); \$(window).scroll(setActive); });