Плавающий блок на сайт


Как мог заметить внимательный посетитель моего блога читающего программиста, справа на сайте есть блок "Мои услуги". Этот элемент сайта меняет свое положение на странице при её прокрутке, то есть является как бы плавающим. Если вам хочется иметь такой же блог на воем сайте, то заметка ниже как раз для вас: сделать его просто; потребуется только минимум знаний javascript, мы обойдемся даже без jQuery.

Итак, просто скопируйте данный код к себе на сайт:

<div id="up">Блок над плавающим</div>

<div id="fb">Плавающий блок</div>			

<script>
function floatBlock () {

if (up.getBoundingClientRect().top<20) {
document.getElementById('fb').style.position="fixed";
document.getElementById('fb').style.top="21px";
}

else {
document.getElementById('fb').style.position="relative";
document.getElementById('fb').style.top="0";	
}
}

setInterval('floatBlock();', 500);
</script>
Как же этот код работает? Функция floatBlock() исполняется каждые 500 миллисекунд (раз в полсекунды) и проверяет, на каком расстоянии от верха окна браузера находится элемент "Блок над плавающим" (id="up") - up.getBoundingClientRect. Если это расстояние меньше 20-ти, то тогда "Плавающий блок" (id="fb") занимает фиксированную позицию на странице (document.getElementById('fb').style.position="fixed";) и устанавливается его координата относительно верха окна (document.getElementById('fb').style.top="21px";). В противном случае способ позиционирования элемента устанавливается как relative и он возвращается на место.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, javascript




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Алгоритм XOR-обмена на C#
BlueStacks: бесплатный эмулятор Android
Рассылка писем без спама с помощью phpMailer