person

24.07.2017 в 10:31:21 | Добавил: rayven | Просмотров: 1462 | 3 ответа

Доброго времени суток Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством position:fixed, то увы таких преимуществ не будет. Для меня плавное перемещение с задержкой было не особо важным, а вот то что блок остается на своем месте при горизонтальной прокрутке, это была основная задача. В общем хватит рассуждать, давайте уже что-то делать.1. HTML разметкаВ то место где нужно чтобы блок двигался, вставляем данную разметку. Обычно это место сайдбар. Главным элементом которой является блок div с ID fixed. Можете изменить, но потом не забудьте поменять название и в javascript и в CSS, чтобы потом не было проблем.
Код
<div id="fixed"> // Сюда вставляем любой код </div>
2. Скрипт фиксацииКак и всегда в подвале перед закрывающимся body или если вы предпочитаете, в шапке перед закрывающимся head
Код
<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>
В четвертой строке можете установить значение Padding от верхнего края. В 11 строке если нужно меняем значение margin от верхнего края. По умолчанию они стоят 0. Просто пишите величину в пикселях, но просто цифру, например 100. Ставьте только цифры, обозначение в пикселях - px указывать не надо!3. CSS стилиДалее в файле стилей style.css, добавляем следующий код. Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока.
Код
#fixed{width:200px;position:absolute;}
Сделав все по инструкции, результат не заставит себя ждать. Теперь можете организовать то что Вам нужно. На этом все, спасибо за внимание
| | обсудить на форуме | | Рейтинг: 5.0/1 | Теги: jquery, CSS, div, блок, верстка, Код, JavaScript, Плавающий

1462 визита
↳ 3 ответа 		Ваше мнение о материале 10 из 10
Голосовало: 1
Kot
kot @Kot 24.07.2017 10:41:071
+1
Здравствуй!
А как сделать так, чтобы этот блок остановился внизу сайта?
Чтобы подвал не сдвигался?
материал
HDD
HDD @HDD 24.07.2017 10:42:552
0
Укажи высоту на которой остановиться внизу
Например так:
 
Код
bottomPadding = 300; //высота над которой остоновиться
материал
rayven
Sergej @rayven 24.07.2017 10:45:193
0

Здравствуй. Кот прав, напишу подробнее. Замени код скрипта на такой:
В 4 строке указываем высоту подвала.

Код
$(document).ready(function () {
var offset = $("#fixed").offset();
var topPadding = 20,
bottomPadding = 300; //высота над которой остоновится
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#fixed").stop().animate({
marginTop: 0
});
};
});
});
материал
="uForm uComForm">
Войдите:
avatar