Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.05.2017, 22:07
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Проблема с совместимостью браузеров
var menu_selector = ".nav"; 
 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top-250 <= 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-250
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
 
    });
 
});



Вот эту строчку IE и firefox как будто бы игнорирует. Хотя в хроме всё отображается корректно. А в этих двух оно не даёт отступ сверху. Или можно как нибудь по другому дать отступ?
scrollTop: target.offset().top-250

Здесь, этот скрипт целиком
demo.webcareer.ru/2016/01/change_active_nav/
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2017, 22:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Darth_Pandora,
работает везде

Последний раз редактировалось рони, 23.05.2017 в 22:41.
Ответить с цитированием
  #3 (permalink)  
Старый 23.05.2017, 22:44
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

У вас видимо опять проблема с кешированием.
Ответить с цитированием
  #4 (permalink)  
Старый 23.05.2017, 23:45
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Нет, на этот раз не кеширование

Вот http://burjuy.issohost.com/ht_bootstrap/

покликайте по меню. В хроме всё нормально, а вот в мозиле и ие смещается.
Ответить с цитированием
  #5 (permalink)  
Старый 24.05.2017, 01:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Darth_Pandora,
замените custom-menu.js на это
$(document).ready(function () {
    var menu_selector = ".main-nav"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню.

function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").removeClass("active").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        var height = target.outerHeight();
        if (target.position().top - 170 <= scroll_top && target.position().top - 170 +  height > scroll_top) {
            $(this).addClass("active");
        }
    });
}
    $(document).on("scroll", onScroll);

    $(menu_selector + " a").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-170
        }, 500, function(){
          history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + hash);
          $(document).on("scroll", onScroll);
        });

    });

});
Ответить с цитированием
  #6 (permalink)  
Старый 24.05.2017, 11:13
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Спасибо, а не могли бы вы мне ещё подсказать, как сделать так, чтобы подсветка кнопочек не затухала?
Вот ссылка
http://burjuy.issohost.com/htch_bootstrap/
Если потыкаете по меню, то увидите, что оно сперва подсвечивает пункты, но не остаётся. Точнее на некоторых пунктах держится, на других нет. Я думала дело в css, но оказалось, что не в нём.
Ответить с цитированием
  #7 (permalink)  
Старый 24.05.2017, 11:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Darth_Pandora,
пока вариантов нет, как ещё согласовать
$(document).on("scroll", onScroll);
location.href
и $(menu_selector + " a").click
может кто другой подскажет, или может плагины?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
шутки браузеров не кончаются... Tecvid Opera, Safari и др. 1 12.04.2015 15:20
Парсинг HTML -> DOM в нормальных браузерах (таки проблема) FINoM Events/DOM/Window 9 19.01.2014 17:38
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19