Продвинутый ScrollSpy

286

14 октября 2017, 18:29

Приветствую. Как сделать такой ScrollSpy, как на странице: https://material.io/guidelines/style/color.html

Суть заключается в том, что при прокрутке меняется текст в адресной строке. То есть если вы в разделе Color palette, то ссылка будет такой: https://material.io/guidelines/style/color.html#color-color-palette, если же прокрутите ниже и попадете в раздел Color system, то ссылка будет такой: https://material.io/guidelines/style/color.html#color-color-system и сама ссылка меняется именно при прокрутке.

Как такое реализовать? Простой ScrollSpy с добавлением css классов к элементам нужным при достижении "якорей" или как там я нашел как реализовать и реализовал, но не знаю как сделать это.

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>