CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 294   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

49

Плавающий блок с помощью jQuery

Jemand 68299 ,
JavaScript

1. CSS

.left {
	width: 70%;
	float: left;
	height: 1500px;
}
.right {
	margin-top: 10px;
	float: right;
	width: 20%;
}
#fixed {
	background: #CCC;
	padding: 20px;
}

2. Подключение jQuery

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

Данный код добавляем в раздел <head>
3. JavaScript

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

Данный код, также, добавляем в раздел <head>, но после кода подключения jQuery.
4. HTML

<div class="left">
	<!-- Содержание -->
</div>
<div class="right">
	<div id="fixed">Текст фиксированного блока.</div>
</div>

Демо

Рекламная пауза

» 49 комментариев

  1. Добрый день!

    Подскажите, как сделать, чтобы плавающий блок не отставал при вертиальной прокрутке.
    Например, как в левой части страницы сайта fast-torrent.ru/film/avatar.html
    P.S. Не знаю, насколько уместно выкладывать посторонние линки на этом сайте, но с ними мне описание ситуации кажется понятнее.

    • Здравствуйте MrCredo.
      Я не разбирался как сделано на указанном Вами сайте, но здесь можно обойтись без jQuery.

      <html>
      <head>
      	<title></title>
      <style type="text/css">
      #fixed {
      	width: 25px;
      	height: 150px;
      	background: #ccc;
      	border: 1px solid #000;
      	position: fixed;
      	top: 200px;
      	left: 0;
      	}
      </style>
      <!--[if IE]>
      <style type="text/css">
      #fixed {
      	width: 25px;
      	height: 150px;
      	background: #ccc;
      	border: 1px solid #000;
      	position: absolute;
      	top: 200px;
      	left: 0;
      	top: expression(eval(document.body.scrollTop + 200) + "px");
      	}
      </style>
      <![endif]-->
      </head>
      <body>
      <div id="fixed">
      </div>
      <br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr><br><hr>
      </body>
      </html>
      

      Возможно Вам подойдёт этот вариант, если нет, пишите что не устраивает.

      • Вариант с position:fixed конечно хорош, но изза того, что Опера местами не ладит с этим параметром и вызывает “тормоза”, то данный вариант выступает хорошей альтернативой.

  2. Устраивает! Спасибо.

  3. На Вашем блоге я нашел те вещи, которые искал очень давно. Говорю искреннее thanks автору!)

  4. Круто =)

  5. Доброго времени суток!
    помогите начинающему плиз :-)
    luksweb.ru/view_post.php?id=273
    добавил скрипт для просмотра картинок и перестает работать плавающее меню, после запуска этого скрипта (до открытия картинки, менюха бегает отлично), как передавать управление, после закрытия картинки, плавающему меню

  6. Спасибо!
    Просто в падлу было придумывать, как это реализовать).

  7. Спасибо вам, автор этого сайта. Очень много полезного почерпнул, и обязательно поставлю у себя на сайте.

  8. Большое спасибо! Несколько дней изучала все о плавающих блоках, Ваш – лучше всех. Понятно, просто и работает!
    Только не могу настроить чтобы блок не смещался просто в право на всю ширину страницы, а оставался справа, но в определенном месте, относительно например таблицы шириной 875 пикселей.

  9. У меня получилось! Благодарю!!!!

  10. Спасибо за урок!

    Подскажите как ограничить движение плавающего блока по вертикали?
    Сейчас блок спускается вниз до бесконечности. )
    Пример справа – _stihi-na-svadbu_ru/journal/kak-otmetit-svadbu-chtobyi-zapomnilas-na-dolgo/

  11. здравствуйте , я новичок и не могу разобраться ставлю Плавающий блок с помощью jQuery, перестает работать аккордеон, пытался подключать скрипты разными последовательностями не помогает. Где-то конфликт не могу понять.
    Помогите пожалуйста.

  12. спасибо. все просто и понятно. нет привязки к высоте блока, а это главное, так как высота у мена не фиксированная.

  13. и, кстати, код jquery можно просто прописать в одной из плюшек, котрые подключены в

    у меня все плюшки в одном сжатом файле что ускоряет загрузку и снижает нагрузку на сервер ))))

  14. Просто и круто. Спасибо.

  15. Можно ли сделать, чтобы он работал без анимации (запаздывания), а чтобы просто “остовался на месте” относительно экрана.

  16. По вопросу бага данного блока – прокрутки вниз до бесконечности.
    Здесь обсуждалась аналогичная проблема:
    http://html-css.info/2010/06/jquery-position-fixed/
    В комментариях предлагали несколько вариантов устранения бесконечной прокрутки. Может какой-нибудь из предложенных вариантов подходит для вашего плавающего блока?

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

  18. Автор упустил один маленький, но очень важный момент.
    Дело в том, что в некоторых шаблонах движков уже используется JQVERY и его файл подключать повторно нет необходимости, при повторном подключении могут возникнуть проблемы с отображением содержимого.
    Для выяснения присутствия подключенного JQVERY, достаточно кликнуть на странице правой клавишей мыши(в мазиле) и выбрать, в выпадающем меню вкладку, “Исходный код страницы”. Далее исследовать файлы заканчивающиеся на “.js”, как правило они содержат слово “jquery” и в их содержимом есть описание вроде этого:

    /*!
     * jQuery JavaScript Library v1.5.2
     * http://jquery.com/
     *
     * Copyright 2011, John Resig
     * Dual licensed under the MIT or GPL Version 2 licenses.
     * http://jquery.org/license
     *
     * Includes Sizzle.js
     * http://sizzlejs.com/
     * Copyright 2011, The Dojo Foundation
     * Released under the MIT, BSD, and GPL Licenses.
     *
     * Date: Thu Mar 31 15:28:23 2011 -0400
     */

    Удачи, друзья.

    • Автор упустил один маленький, но очень важный момент.
      Дело в том, что в некоторых шаблонах движков уже используется JQVERY и его файл подключать повторно нет необходимости

      Это каждый пользователь должен сам контролировать…

      • Здравствуйте. Вставил вот так без подключения jQuery, плавающее окно, а в нем форма подписки на рассылку со смартреспондера, но она не работает. В смысле окошко висит, но поля не активные для ввода информации, в чем может быть проблема, подскажите?

  19. Здравствуйте. Спасибо Вам огромное за ваши скрипты.
    Изучая их, я не малому научился. Я решил совместить 2 скрипта один (http://jemand.ru/modalnoe-okno-na-jquery/) и второй (http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/). Но при совмещении этих двух скриптов данная ссылка работает на оба скрипта и при прокрутке тем самым плавающий блок просто уходит за приделы страницы. Помогите мне решить данную проблему.
    Заранее спасибо….

  20. Ну я в принцепи решил эту проблему сам=)
    И еще раз огромное СПАСИБО Вам огромное!!!


Оставить комментарий