На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


Как мог заметить внимательный посетитель моего блога читающего программиста, справа на сайте есть блок "Мои услуги". Этот элемент сайта меняет свое положение на странице при её прокрутке, то есть является как бы плавающим. Если вам хочется иметь такой же блог на воем сайте, то заметка ниже как раз для вас: сделать его просто; потребуется только минимум знаний 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 и он возвращается на место.




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





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




Свой скрипт для чужого сайта
Базы данных ADO.NET на языке C++\CLI


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.