jQuery прикрепленный div при скроллинге

Информационное окно, окно с  рекламой или навигацией – вот что хочется постоянно держать в поле зрения пользователей Вашего сайта.

Для того чтобы закрепить div блок, как Вы возможно уже знаете, существует решение CSS:

<style>div.stick{position:fixed;}</style>
<div class="stick">Закрепленный блок</div>

Но такой блок будет закреплен постоянно. А что если фиксировать div только тогда когда это нужно? Например в случае, если пользователь докрутил полосу прокрутки до нужной информации на сайте. С помощью jQuery мы сможем прикрепить и открепить блок тогда когда это нужно. Пишем скрипт:

<script>
function div_stick_on_off(divFloat, divStatic) {
var topYPosition = $(window).scrollTop();
var divYPosition = $('#'+divStatic).offset().top;
if (topYPosition > divYPosition) {
$('#'+divFloat).addClass('fixedDivClass');
} else {
$('#'+divFloat).removeClass('fixedDivClass');
}
}
$(function () {
$(window).scroll(function(){
div_stick_on_off('myFloatDiv','myStaticDiv');
});
div_stick_on_off('myFloatDiv','myStaticDiv');
});
</script>

Теперь дело за HTML частью и CSS стилями:
<style>
#myFloatDiv{
font-weight:bold;
background-color: rgba(51, 51, 51, 0.83);
color: #fff;
padding: 10pt 0pt 10pt 10pt;
line-height: 1;
}
.fixedDivClass{
position:fixed;
top: 0;
z-index: 999;
width: 700px;
margin:auto;
}
</style>
<p>Текст вверху страницы.</p>
<div id="myStaticDiv"><!-- статичный невидимый блок, необходим для расчета Y-координаты, при достижении которой включается или выключается плавающий блок ->   </div>
<div class="block34">Плавающий блок</div>
<p>Основной текст страницы.
Поверх этого текста будет проплывать блок- поплавок.</p>

Вы можете посмотреть как это работает.

Опубликовано 03.04.2015 в 03:34 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, JSON · Теги: , , , , , , , ,