Проблема с совместимостью браузеров
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/ |
Darth_Pandora,
работает везде |
У вас видимо опять проблема с кешированием.
|
Нет, на этот раз не кеширование
Вот http://burjuy.issohost.com/ht_bootstrap/ покликайте по меню. В хроме всё нормально, а вот в мозиле и ие смещается. |
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);
});
});
});
|
Спасибо, а не могли бы вы мне ещё подсказать, как сделать так, чтобы подсветка кнопочек не затухала?
Вот ссылка http://burjuy.issohost.com/htch_bootstrap/ Если потыкаете по меню, то увидите, что оно сперва подсвечивает пункты, но не остаётся. Точнее на некоторых пунктах держится, на других нет. Я думала дело в css, но оказалось, что не в нём. |
Darth_Pandora,
пока вариантов нет, как ещё согласовать $(document).on("scroll", onScroll); location.href и $(menu_selector + " a").click может кто другой подскажет, или может плагины? |
| Часовой пояс GMT +3, время: 15:19. |