Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2016, 02:47
Интересующийся
Отправить личное сообщение для vladislav_zp Посмотреть профиль Найти все сообщения от vladislav_zp
 
Регистрация: 15.04.2016
Сообщений: 10

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

и подскажите еще один момент, чтобы при нажатии на ссылку в меню, сайт прокручивался к якорю без окончания "..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);
        });
 
    });
 
});

Последний раз редактировалось vladislav_zp, 31.07.2016 в 18:15.
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2016, 08:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2016, 10:45
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от vladislav_zp
чтобы при нажатии на ссылку в меню, сайт прокручивался к якорю без окончания "..com#home, ..com#contact и т.д." после домена в строке браузера.
Мотай вручную, то есть функцией с аргументом целевой ноды, или заменяй адрес через history на без хеша. Так просто в адресе страницы менять ничего нельзя - любые манипуляции с href и хешем перезагружают страницу.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2016, 10:48
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Касательно мерцаний при прокрутке читай о проблематике асинхронной прокрутки.
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2016, 16:20
Интересующийся
Отправить личное сообщение для vladislav_zp Посмотреть профиль Найти все сообщения от vladislav_zp
 
Регистрация: 15.04.2016
Сообщений: 10

Сообщение от рони Посмотреть сообщение
,
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
эти теги [ js ]код[ /js ] вставлять в html-документ? или куда я просто не пойму.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2016, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Scroll menu, подсветка активных пунктов меню при скролле makissm21 AJAX и COMET 13 29.04.2017 19:28
Изменение прозрачности при клике AJIUK jQuery 8 09.03.2014 16:00
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 22:15
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Прозрачный текст при скролле леха310596 Элементы интерфейса 3 23.04.2013 20:38