Активные ссылки

Активные ссылки

Модификация позволяет сделать ссылки активными по мере скролла.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
33734928
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero блоке создаём шапку и задаём ей класс uc-nav-active
Шаг 1
Добавляем ссылки с помощью обычного текста. Вешаем на них id блоков, до которых будет происходить скролл + добавляем класс link-menu на каждую ссылку
Шаг 2
В самом низу страницы создаём блок T123 и добавляем код. В коде можно поменять цвет активной ссылки, а так же убрать или поставить подчеркивание ссылки ("настройки ссылок")
Шаг 3
<!--Активные ссылки
https://mt-webdesign.ru/active-link-->
<style>
/*Настройки ссылок*/
:root {
--Line_Link_Color: #000; /*цвет полос. transparent - такое значение вместо цвета #000 сделает полосу прозрачной*/
--Link_Color_active: #000; /*цвет активной ссылки.*/
}
.uc-nav-active .t396__artboard {
position: fixed;
z-index: 999;
}
.link-menu {
transition: 0.3s !important;
}
.link-menu a:before {
content: "";
width: 0%;
height: 1px;
position: absolute;
display: block;
background-color: var(--Line_Link_Color);
left: 0;
bottom:0;
transition: 0.3s;
}
.link-menu a:hover:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
display: block;
background-color: var(--Line_Link_Color);
left: 0;
bottom:0;
transition: 0.3s;
}
.link-active .tn-atom a:before {
content: "";
width: 0%;
height: 1px;
position: absolute;
display: block;
background-color: var(--Line_Link_Color);
left: 0;
bottom:0;
transition: 0.3s;
}
.link-active a:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
display: block;
background-color: var(--Line_Link_Color);
left: 0;
bottom:0;
transition: 0.3s;
}
.link-menu .tn-atom {
transition: 0.3s;
}
.link-menu .tn-atom:hover, .link-active {
transition: 0.3s;
color: var(--Link_Color_active) !important;
}
</style>
<script>
var topMenu = $(".uc-nav-active"),
topMenuHeight = topMenu.outerHeight()+150,
menuItems = topMenu.find(".link-menu 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 : "";
menuItems
.parent().removeClass("link-active")
.end().filter("[href='#"+id+"']").parent().addClass("link-active");
});
</script>
Не забудьте подключить блоки T173 и T178 для якорных ссылок и плавного скролла
Примечание
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda