Как сделать плавающий блок js

Добавил пользователь Дмитрий К.
Обновлено: 04.10.2024

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

Рассмотрим пример HTML: Результат на странице браузера будет таким: Если бы свойства float со значением left не было, то оба контейнера были бы один под другим во всю ширину. Но float заставляет элемент прилипнуть к верхнему левому углу родительского контейнера (если указан float: right, то к правому). Все inline элементы (к примеру, текст) начинают обтекать элемент.

Если в одном родительском контейнере будет несколько элементов с float, то они будут обтекать друг-друга по горизонтали. Если места будет не хватать, то они будут обтекать вертикально (будут располагаться ниже).

Запрет обтекания

Бывают случаи, когда необходимо полностью запретить обтекание элемента (одной или двух сторон. Для этого необходимо задать этому элементу свойство "clear" и значением для запрета: "right", "left", "both" (запрет на обтекание справа, слева и с двух сторон). Попробуем сделать полный запрет на обтекание первого контейнера из примера выше: Результат будет такой: У второго контейнера появился полный запрет на обтекание элементами с обеих сторон "clear:both;". Поэтому он перешёл на следующую строчку и занял всю ширину, как обычно делают блочные элементы.

Списки с float элементами

: Элементы, имеющие свойство float, вылезают за пределы родительского контейнера, через его нижнюю границу. Если после такого списка будет идти другой элемент, то на него будут наплывать все выпавшие из списка пункты. Продемонстрируем это, добавив контейнер

сразу после списка: В браузере результат будет такой (выделим div контейнер зелёной рамкой для наглядности): Следующий блок не только заполз на плавающие элементы, но и передвинул текст внутри себя, чтобы он не перекрывался. Чтобы решить эту проблему, используется несколько техник. К примеру, контейнеру из примера div можно задать свойство "clear:both;" тогда он опустится ниже всех элементов так, чтобы его не обтекали: Второй способ - это вставить внутрь родительского блока, в самый конец такой контейнер: Он растянет по вертикали родительский контейнер и все плавающие элементы окажутся бы внутри него. Но мы использовали в своём примере список и не можем поставить внутрь него контейнер, поэтому остаётся только третий способ - использовать CSS псевдолемент after. Для этого напишем такой CSS код: Добавим класс в html код: Класс "clearfix" будет создавать псевдоэлемент после списка По своей функции он аналогичен контейнеру из второго способа. Результат будет именно тот, который мы ждём: Каждый блок на своём месте, есть плавающие элементы и есть контейнер снизу.

С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Также результат того, что мы будем делать, Вы можете посмотреть здесь.

Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.

Что мы строим

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

Шаг 1

Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:

Это основа разметки, которую мы будем использовать. Основную часть в этом небольшом коде выполниет

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

Шаг 2

font : 10px " ; Lucida Grande" ; , " ; Lucida Sans" ; , " ; Trebuchet MS" ; , verdana, sans-serif ;

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

Другие элементы в таблице стилей управляют визуальным дизайном.

Шаг 3

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

О похожем сайдбаре я упоминал здесь, но в том способе он реально плавает :), а здесь фиксируется.

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

Шаг первый, добавляем этот код в то место, где будет ваш будущий плавающий блок:

(в движке DLE это обычно файл main.tpl, а в wordpress-е это файл sidebar.php)

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

Шаг второй, если у вас не подключена библиотека jquery

Если после первого шага блок не работает , то перед тегом вставляем строчку:

Можете подключить библиотеку jquery по-новее, если хотите. В данном случае версия 1.3.2.

На этом все, должно работать.

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

UPDATE. Есть один минус этого блока: если он большой, то наезжает на футер. В таком случае попробуйте скользящий блок на jQuery, о котором я написал в другой статье.

Есть еще удобный плагин для WordPress- Q2W3 Fixed Widget, он вообще не требует ковыряний в коде (сейчас именно он стоит у меня на этом сайте). Просто устанавливаете его и в любом виджете появляется возможность с помощью галочки сделать его плавающим.

Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип к верху и зафиксировался на месте. Делается элементарно!

Подключение стандартное, как и любого скрипта на JavaScript — создаем файл *.js, подключаем на сайт следом за подключением jQuery и помещаем в него следующий код:

Настройка и параметры

HTML-разметка

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