Автор

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

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


 

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

 

В общем-то меня эта тема не обошла стороной, и решил я сделать себе плавающие меню, с помощью jQuery и этого самого фиксированного блока. И вот менюшка "плавает", как и задумывалось, и теперь пришло время поделится тем, как просто и быстро сделать такой плавающий блок со смещением у себя на сайте или в блоге.

В принципе, простой фиксированный блок возможно реализовать и только при помощи CSS - свойства position со значением fixed, но тогда он изначально будет намертво определен в заданной точке на мониторе посетителя и "плавающим", его будет назвать проблематично. Нам же нужен блок, который смещается и фиксируется лишь при прокрутке страницы.

 

Сразу замечу, что вариантов реализации в сети достаточно, но действительно толковых не много. Большинство обладают громоздким, часто не нужным, кодом, а некоторые не совсем и универсальны. Данный вариант самый простой, без анимаций и прочего - немного CSS и совсем немного jQuery.
HTML будет выглядит так:

<div class="floating">
   <!--Тут содержимое блока-->
  </div>

 

Теперь CSS. Сразу добавим и новый класс, у которого позиционирование зададим как fixed:

.floating {
 background:#1c1c1c;
 color:#fff;
 font: normal normal 14px Tahoma;
 padding:10px;
 width: 300px; /*указываем ширину*/
}
.fixed {
 position: fixed;
 top: 10px; /*здесь указываем отступ сверху*/
 z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}

 

Позиционирование у блока .floating, указывать не нужно, однако он должен располагаться внутри родительского элемента, относительно которого будет позиционироваться на странице. Также нужно указать ширину иначе при фиксированном позиционировании он займет всю доступную область и выйдет за границы родителя.

 

А вот и сам скрипт jQuery. Его задача проста - когда страница прокручена до определенной высоты добавить класс и зафиксировать блок.

$(function(){
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > 200) $('.floating').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс
  else $('.floating').removeClass('fixed');
 });
});

 

Не забываем что для работы такого рода лабуды к сайту должна быть подключена библиотека jQuery.

 

Как подключить jQuery

Использование JavaScript-библиотеки jQuery позволяет во многом упростить написание всевозможных функций для сайта, используя гораздо меньше строк кода. При этом, возможности jQuery практически не ограничены. Для того чтобы использовать и применять скрипты написанные на этой JS-библиотеке сначала необходимо подключить ее к своему сайту. Сделать это возможно несколькими способами:

1. Удаленно подключить jQuery с хостинга JS-библиотек Google или Яндекс
  Google
  Всегда использовать последнюю версию

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Использовать указанную версию

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Яndex

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

2. Подключать библиотеку с официального сайта jQuery, получая всегда последнюю версию:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

3. При использовании собственного сервера. Скачать js-файл с библиотекой, загрузить в директорию на своем сервере и подключить, указав путь к месту загруженного файла.
Например:

<script type="text/javascript" src="/scripts/jquery.min.js"></script>

 

На некоторых платформах изначально подключена jQury-библиотека и дополнительно этого делать не нужно. В код шаблона строка подключения добавляется, обычно, до закрывающего тега </head> желательно разместить ее, что называется, в первых рядах.
В Blogger можно разместить в шаблоне перед строчкой:

<b:skin><![CDATA[

 

И на этом в общем-то все :) Все что нужно по оформлению, положению - прописывается в CSS, скрипт выполняет, как и положено, организационную функцию. Проще не куда.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

В сегодняшнем уроке мы рассмотрим замечательный прием, который поможет сохранить место у вас на сайте, а именно многоуровневое выпадающее меню, которое позволит сэкономить много на сайте, при этом пользователю интуитивно понятно, что следует за дочерним элементом.


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

С каждым днем ресурсы становятся более мощными, при этом возрастают возможности и сайтостроения. Сайты становятся более массивными, требующие многих затрат ресурсов. В данном уроке мы рассмотрим необычным подход к созданию фона для сайта, а именно замена его и воспроизведение видео в качестве заставки. Все выглядит достаточно эффектно, при этом требует не так уж много ресурсов как казалось бы на первый взгляд. Осуществить данную задумку нам поможет небольшой плагин jquery.


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

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


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

Meta редирект наихудший из редиректов его используют лишь в случае когда остальные виды редиректа в htaccess и php не доступны, но как говорится: на безрыбье и рак рыба, поэтому лучше сделать такой редирект чем потерять посетителей навсегда. При всем при этом у нас есть возможность, кстати отсутствующая при предыдущих вариантах редиректа сообщить пользователям о том, что сайт переехал на новый домен и это тоже неплохо.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close