Sky Wall

sky-wall.ru/js/navi.js

Речь идет о скрипте navi.js, который используется на сайте sky-wall.ru для создания интерактивной навигации.

Как работает скрипт?

navi.js работает следующим образом:

  1. Он ищет на странице элементы с классом navi, которые являются ссылками на разделы сайта.
  2. При клике на ссылку, скрипт анимированно прокручивает страницу к соответствующему разделу.
  3. При прокрутке страницы скрипт активирует текущий элемент навигации, соответствующий просматриваемому разделу на странице.

Код скрипта выглядит следующим образом:

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(event) {
    var target = $(this).attr('href');
    if (target.length) {
      event.preventDefault();
      $('html, body').animate({
        scrollTop: $(target).offset().top
      }, 1000);
    }
  });

  $(window).on('scroll', function() {
    var currentPosition = $(this).scrollTop() + $(window).height() / 2;
    $('.navi a').each(function() {
      var target = $(this).attr('href');
      var targetTop = $(target).offset().top;
      var targetBottom = targetTop + $(target).outerHeight();
      if (currentPosition >= targetTop && currentPosition < targetBottom) {
        $('.navi a').removeClass('active');
        $(this).addClass('active');
      }
    });
  });
});

Преимущества использования скрипта

Использование скрипта navi.js на сайте sky-wall.ru имеет следующие преимущества:

  1. Улучшение пользовательского опыта благодаря быстрой и плавной навигации по сайту.
  2. Создание общего стиля навигации на сайте.
  3. Повышение удобства интерактивной навигации для пользователей.

Заключение

Скрипт navi.js является эффективным инструментом для создания интерактивной навигации на сайте sky-wall.ru, который улучшает пользовательский опыт и общий внешний вид сайта. Использование этого скрипта может быть полезным для других сайтов, которые также стремятся улучшить свою навигацию и общую пользовательскую опытность.