Скрипты для uKit 15.11.2017 2 1013
Выделение пунктов меню при прокрутке страницы

Выделение пунктов меню при прокрутке страницы

Скрипт наиболее подходит для длинных одностраничных сайтов. Подсветка пункта меню поможет быстрее сориентироваться в навигации по сайту и понять в каком месте страницы вашего сайта находится пользователь.

При прокрутке Landing page сайта на uKit, из-за большого количества контента возникает ситуация, когда вы давно прошли заголовок нужного блока и "потерялись" на сайте. Скрипт автоматически выделит выбранный пункт меню исходя из позиции. Таким образом мы повысим интуитивность и сделаем сайт ближе к пользователям.

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код

<script>
require(['jquery'], function($){
 var anchor = {

  el_menu: '.ul-w-mainmenu-nav:eq(0)', // Меню

  // Старт
  init: function(){
   anchor.menu();
   $(document).scroll(function(){
    anchor.scolling();
   });
  },

  // Собираем якоря из меню
  menu: function(){
   anchor.links_arr = [];
   $(''+anchor.el_menu+' a').each(function(i){
    if($(this).attr('href')){
     if($(this).attr('href').indexOf('#') != -1){
      var resh = $(this).attr('href').indexOf('#'),
       all = $(this).attr('href').length,
       val = $(this).attr('href').substr(resh, all);
      anchor.links_arr[i] = $(this).attr('href')+'::'+val;
     }
    }
   });
  },

  // Кто-то Скрулит, я ловлю этот прекрасный момент
  scolling: function(){
   anchor.links_arr.forEach(function(item){
    var item_arr = item.split('::');
    if(anchor.inWindow(''+item_arr[1]+'').length > 0){
     $('.ul-w-mainmenu-active-item').removeClass('ul-w-mainmenu-active-item');
     $('a[href="'+item_arr[0]+'"]').parent().addClass('ul-w-mainmenu-active-item');
     return false;
    }
   });
  },

  // Проверка якоря в области видимости
  inWindow: function(s){
   var scrollTop = $(window).scrollTop(),
    windowHeight = $(window).height(),
    currentEls = $(s),
    result = [];
   currentEls.each(function(){
    var el = $(this),
     offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight)) result.push(this);
   });
   return $(result);
  }
 }
 anchor.init();
});
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 2
avatar
1
сайт с демо-версией этого скрипта на какой платформе интересно делали? на ukit такое нереально сделать без использования своего кода
avatar
0
2
Этот сайт на uKit и для него действительно применялся сторонний код: https://ukit.top/shop/35/desc/shablon-avtoservisa-dlya-saita
avatar