Я возился с некоторым jquery, пытаясь справиться с этим.
У меня есть ul nav, у которого есть абсолютное положение, но после того, как я прокручиваю страницу вниз на 200 пикселей, мне бы хотелось, чтобы она переключилась на фиксированную позицию, чтобы nav всегда оставался на странице.
Как мне это сделать?
ниже приведен пример, над которым я работаю
Спасибо всем за то, что так быстро помогли
это то, что я хотел
$(document).ready(function() {
var theLoc = $('ul').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('ul').hasClass('fixed')) {
$('ul').removeClass('fixed');
}
} else {
if(!$('ul').hasClass('fixed')) {
$('ul').addClass('fixed');
}
}
});
});
Я получил его от
Thankss!!!!!
Я написал этот плагин jQuery, чтобы сделать именно это.
Вот код, который я использую для создания "липкой" боковой панели. Вам нужно будет изменить идентификаторы в соответствии с вашей разметкой.
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("#sidebar").offset();
$(window).scroll(function () {
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top) {
$("#sidebar").css({ position: 'fixed', top: '0px' });
} else {
$("#sidebar").css({ position: 'static' });
}
});
});
$(window).resize(function() {
sidebarScrollTop = $("#sidebar").offset().top;
});
$(document).resize(function() {
sidebarScrollTop = $("#sidebar").offset().top;
});
В принципе, все, что вам нужно сделать, это изменить #sidebar для идентификатора контейнера боковой панели. Этот код будет видеть, прокручивается ли элемент боковой панели над верхней частью экрана. Если это так, он изменяет свое положение на fixed, и когда он снова вернется к тому, чтобы быть на странице, позиция возвращается к static (по умолчанию).
Функции $(document).resize() и $(window).resize() будут следить за тем, чтобы боковая панель оставалась в верхней части страницы при изменении размера документа/окна. Функция документа гарантирует, что боковая панель работает правильно, даже если у вас есть анимация jQuery, изменяющая размер элементов.