Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Мерцание навигации при скролле (https://javascript.ru/forum/dom-window/64272-mercanie-navigacii-pri-skrolle.html)

vladislav_zp 31.07.2016 02:47

Мерцание навигации при скролле
 
Такая проблема: сделал на лендинге навигацию, в которой меняется активный пункт меню при прокрутке определённой секции, но в момент самого скролла активная ссылка иногда мерцает (в глаза не сильно кидается, но неприятно), а также при наведении курсора на различные ссылки в контенте сайта. В чём может быть проблема?

и подскажите еще один момент, чтобы при нажатии на ссылку в меню, сайт прокручивался к якорю без окончания "..com#home, ..com#contact и т.д." после домена в строке браузера.

вот сам скрипт:

var menu_selector = ".header";
 
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
        }, 900, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
 
    });
 
});

рони 31.07.2016 08:34

vladislav_zp,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

warren buffet 31.07.2016 10:45

Цитата:

Сообщение от vladislav_zp
чтобы при нажатии на ссылку в меню, сайт прокручивался к якорю без окончания "..com#home, ..com#contact и т.д." после домена в строке браузера.

Мотай вручную, то есть функцией с аргументом целевой ноды, или заменяй адрес через history на без хеша. Так просто в адресе страницы менять ничего нельзя - любые манипуляции с href и хешем перезагружают страницу.

warren buffet 31.07.2016 10:48

Касательно мерцаний при прокрутке читай о проблематике асинхронной прокрутки.

vladislav_zp 31.07.2016 16:20

Цитата:

Сообщение от рони (Сообщение 423893)
,
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

эти теги [ js ]код[ /js ] вставлять в html-документ? или куда я просто не пойму.

рони 31.07.2016 16:44

vladislav_zp,
в ваше первое сообщение , выделите код, нажмите


Часовой пояс GMT +3, время: 12:24.