Greetings. How to make a ScrollSpy, as on the page: https://material.io/guidelines/style/color.html
The bottom line is that when scrolling changes the text in the address bar. That is, if you are in the Color palette section, the link will be like this: https://material.io/guidelines/style/color.html#color-color-palette , if you scroll below and go to the Color system section, the link will be like this: https://material.io/guidelines/style/color.html#color-color-system and the link itself changes exactly when scrolling.
How to implement this? Simple ScrollSpy with the addition of css classes to the elements needed when reaching the "anchors" or whatever I found how to implement and implement, but I do not know how to do it.
var lastId, topMenu = $("#top-menu"), topMenuHeight = topMenu.outerHeight() + 15, menuItems = topMenu.find("a"), scrollItems = menuItems.map(function() { var item = $($(this).attr("href")); if (item.length) { return item; } }); $(window).scroll(function() { var fromTop = $(this).scrollTop() + topMenuHeight; var cur = scrollItems.map(function() { if ($(this).offset().top < fromTop) return this; }); cur = cur[cur.length - 1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; menuItems .parent().removeClass("menu__item--current") .end().filter("[href='#" + id + "']").parent().addClass("menu__item--current"); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="logo"> <div class="ico gradient1" data-gradient-css="linear-gradient(45deg, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92)"> G </div> </div> <div class="ripple"> <div class="overlay-text"> Мой текст </div> <br> <div class="overlay-href"><a class="overlay-href" href="mailto:xxx@gmail.com" target="_blank">Мой текст 2</a></div> </div> <script src="mypage/js/jquery.min.js"></script> <script src="mypage/js/ripple.js"></script> <div class="menu"> <nav class="menu menu--ferdinand"> <ul class="menu__list js-scrollspy-nav" id="top-menu"> <li class="menu__item menu__item--current"> <a href="#my-head" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#my-projects" id="ss2" class="menu__link">Проекты</a> </li> <li class="menu__item"> <a href="#my-contacts" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#my-message" class="menu__link">Напишите мне</a> </li> </ul> </nav> </div> </div> 
