Смещение боковой панели с использованием.affix и фиксированной навигационной панели
Итак, я работаю над сайтом с фиксированной панелью навигации:
http://abnetworksa.rewind9.com/servicios/infraestructura/
Помимо фиксированной навигационной панели, есть "липкая" боковая панель. Ссылки на эту боковую панель являются якорями, которые перенаправляют пользователя на определенный контент на той же странице.
Кажется, все работает правильно. Однако при нажатии на одну из этих ссылок на боковой панели заголовок целевого содержимого скрывается под фиксированной панелью навигации. Есть ли способ, которым я мог бы настроить и сместить для этой ссылки боковой панели?
Я старался
var offset = 380;
$('.sidebar-nav li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, +offset);
});
Но это не работает, кажется, он начинает делать какие-то странные вычисления снизу вверх.
Любая помощь?
Большое спасибо!
1 ответ
Заголовок не исправлен. Я вижу, вы используете загрузчик, чтобы вы могли использовать navbar-fixed-top
класс, чтобы сделать это липким. Вы должны изменить класс на вашем header
тег от navbar-static-top
в navbar-fixed-top
,
Чтобы ответить на вторую часть вашего вопроса, поскольку вы используете загрузчик в своем проекте, этот ответ /questions/31491778/kak-dobavit-plavnuyu-prokrutku-v-shpionskuyu-funktsiyu-bootstrap/31491784#31491784 поможет вам.
$(".sidebar-nav li a").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
var heightOfNavigationMenu = $('.navbar').height
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top - heightOfNavigationMenu
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
Обратите внимание на переменную heightOfNavigationMenu
, Также ScrollIntoView не поддерживается в некоторых браузерах.