sky-wall.ru/js/navi.js
Речь идет о скрипте navi.js, который используется на сайте sky-wall.ru для создания интерактивной навигации.
Как работает скрипт?
navi.js работает следующим образом:
- Он ищет на странице элементы с классом
navi
, которые являются ссылками на разделы сайта. - При клике на ссылку, скрипт анимированно прокручивает страницу к соответствующему разделу.
- При прокрутке страницы скрипт активирует текущий элемент навигации, соответствующий просматриваемому разделу на странице.
Код скрипта выглядит следующим образом:
$(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 имеет следующие преимущества:
- Улучшение пользовательского опыта благодаря быстрой и плавной навигации по сайту.
- Создание общего стиля навигации на сайте.
- Повышение удобства интерактивной навигации для пользователей.
Заключение
Скрипт navi.js является эффективным инструментом для создания интерактивной навигации на сайте sky-wall.ru, который улучшает пользовательский опыт и общий внешний вид сайта. Использование этого скрипта может быть полезным для других сайтов, которые также стремятся улучшить свою навигацию и общую пользовательскую опытность.