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

Уроки по Тильде

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

Описание

Материал из видео

В Zero блоке создаём шапку и задаём ей класс uc-nav-active

Шаг 1

Добавляем ссылки с помощью обычного текста. Вешаем на них id блоков, до которых будет происходить скролл + добавляем класс link-menu на каждую ссылку

Шаг 2

В самом низу страницы создаём блок T123 и добавляем код. В коде можно поменять цвет активной ссылки, а так же убрать или поставить подчеркивание ссылки ("настройки ссылок")

Шаг 3

Скрипт


<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 для якорных ссылок и плавного скролла

Шаг 4