SecurityYourFingers
@SecurityYourFingers
I make other things, but i know that without your

Как исправить анимацию подчеркивания в меню?

Как же всё таки подцепить ещё и перемещение подчеркивания при прокрутке страницы??
5c2253539b840970887190.png
При наведении или нажатии подчеркивание перемещается нормально
5c2253ceb524f953449142.png
Скрипт анимации подчеркивания
//для анимации подчеркивания
$(function() {
    var $line           = $(".line"),
        $menu_link      = $(".list__item--link"),
        $active         = $(".active"),
        $element,
        $active_left    = $active.position().left,
        $active_width   = $active.parent().width(),
        $new_left,
        $new_width;

    $line.width($active_width).css("left", $active_left);

    $($menu_link).hover(function() {
        $element = $(this);
        $new_left =  $element.position().left;
        $new_width =  $element.parent().width();
        $line.stop().animate({left: $new_left,width: $new_width});
    }, function() {
        $line.stop().animate({left:$active_left,width:$active_width});
    });

    //так плюшка
    $($menu_link).click(function(e){
        //e.preventDefault();
        $(".list").find(".active").removeClass("active");
        $(this).addClass("active");
        $active_left    =  $(this).position().left,
            $active_width   =  $(this).parent().width();
    })
});
//END для анимации подчеркивания
//прокрутка страницы - active
var menu_selector = ".top-menu"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню.
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    $("a[href*='#']").click(function(e){
        e.preventDefault();
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
    });
});
// $(document).ready(function(){
//     $(".top-menu").changeActiveNav();
// });
//END прокрутка страницы - active


Этот скрипт перемещает подчеркивание к выделенному(активному) пункту.
Необходимо добавить такое же перемещение подчеркивания при скроле страницы. То есть опускаемся вниз, а у нас в меню автоматически подчеркивание переезжает на соответствующий пункт

ссылка на сайт на котором должна быть реализована такая вещь.

P.S. у меня получилось только менять цвет активного пункта при прокрутке. Как же всё таки подцепить ещё и перемещение подчеркивания??????
  • Вопрос задан
  • 310 просмотров
Пригласить эксперта
Ответы на вопрос 1
alekstar79
@alekstar79
Добавь триггер события, по идее должно работать

function onScroll() {
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
            $(this).trigger('hover'); // <= Add
        } else {
            $(this).removeClass("active");
        }
    });
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы