Интересный скрипт для сайта, фиксирующий блок при прокрутке страницы сайта
Очень полезная вещь для сайта (много где сейчас применяю этот скрипт) - скрипт Jquery sticky. Предназначение этого скрипта в фиксации верхнего блока (допустим меню) на экране монитора при прокрутки страницы вниз. То есть этот блок всегду будет оказыватьтся в поле вашей видимости. Но отличие от обычного параметра position:fixed в том, что этот блок может находиться где угодно на сайте и его даже может быть не видно изначально, но при прокрутке сайта вниз, он сначала окажется на месте, где он всегда стоит, а при дальнейшем скроллинге он зафиксируется вверху экрана.
Данный скрипт можно применять для рекламного баннера, верхнего и бокового меню или другой какой-либо важной информации. Установить скрипт Jquery sticky на сайт очень легко:
1. Скачиваем архив и извлекаем содержимое в корень вашего сайта, а точнее только один файл jquery.sticky.js
2. Прописываем между <head> и </head> пути к скриптам и css:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script> $(window).load(function(){
$("#header").sticky({ topSpacing: 0 });
});
</script>
где #header - определяющий id блока, который будет фиксироваться. Вы можете вместо #header поставить свой любой id или class (допустим .menu)
3. Добавляем в css файл следующие параметры:
body {height: 10000px; padding: 0; margin: 0;}
#header {background: #bada55; color: white; font-family: Droid Sans; font-size: 18px; line-height: 1.6em; font-weight: bold; text-align: center; padding: 10px; text-shadow: 0 1px 1px rgba(0,0,0,.2); width:100%; box-sizing:border-box;}
4. Вставляем туда, где у вас будет находиться этот блок следующий код:
<p>This is test this is text this is text at the top.</p> <div id="header"><p>This is the sticky thingy that is really cool.</p></div> <p>This is test this is text this is text at the bottom.</p>
где блок с id="header" - это и есть наш блок, который будет фиксироваться при прокрутке страницы
Вот и все! Уверен данный скрипт вам пригодиться в работе. Всего доброго! Пример использования стоит на этом сайте. Верхнее меню находится изначально чуть ниже логотипа, а при скролле оно остается на верху, миную логотип, поиск и иконки соц. сетей.
Комментарии ()