Доброго времени суток
Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством position:fixed, то увы таких преимуществ не будет. Для меня плавное перемещение с задержкой было не особо важным, а вот то что блок остается на своем месте при горизонтальной прокрутке, это была основная задача.
В общем хватит рассуждать, давайте уже что-то делать.1. HTML разметкаВ то место где нужно чтобы блок двигался, вставляем данную разметку. Обычно это место сайдбар. Главным элементом которой является блок div с ID fixed. Можете изменить, но потом не забудьте поменять название и в javascript и в CSS, чтобы потом не было проблем.
Код
<div id="fixed">
// Сюда вставляем любой код
</div>
Код
<script type="text/javascript">
$(document).ready(function () {
var offset = $('#fixed').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
$('#fixed').stop().animate({marginTop: 0});
}
});
});
</script>
Ставьте только цифры, обозначение в пикселях - px указывать не надо!3. CSS стилиДалее в файле стилей style.css, добавляем следующий код.
Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока.
Код
#fixed{width:200px;position:absolute;}
На этом все, спасибо за внимание
В этой теме Вы можете задать вопрос о материале Фиксированный плавающий блок при прокрутке.
Воскресенье 19.05.2024, 01:57:30 
