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

Меню

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

34

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

Jemand 8095 ,
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>

Демо

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

» 34 комментария

  1. 10 июня 2011 22:08

    Thumb up 0  Thumb down0 0

    Добрый день!

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

    • 12 июня 2011 19:55

      Thumb up 4  Thumb down+4 0

      Здравствуйте 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>
      

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

      • 5 августа 2011 12:14

        Thumb up 2  Thumb down+2 0

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

  2. 13 июня 2011 23:58

    Thumb up 0  Thumb down0 0

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

  3. 20 июня 2011 01:02

    Thumb up 0  Thumb down0 0

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

  4. 26 сентября 2011 23:13

    Thumb up 0  Thumb down0 0

    Круто =)

  5. 8 ноября 2011 18:49

    Thumb up 0  Thumb down0 0

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

    • 10 ноября 2011 18:17

      Thumb up 0  Thumb down0 0

      Дайте ссылку на проблемную страницу.

      • 11 ноября 2011 11:37

        Thumb up 0  Thumb down0 0

        пока на стадии “блокнота”, могу скинуть исходники, скажите куда?

        • 14 ноября 2011 14:03

          Thumb up 0  Thumb down0 0

          Скиньте на jemand [gav-gav] yandex [dot] ru

          • 15 ноября 2011 11:46

            Thumb up 0  Thumb down0 0

            Отправил

          • 15 ноября 2011 12:43

            Thumb up 0  Thumb down0 0

            Нет писем от Вас.

          • 15 ноября 2011 19:31

            Thumb up 0  Thumb down0 0

            Продублировал

          • 15 ноября 2011 20:19

            Thumb up 0  Thumb down0 0

            Нету!
            Скопируйте сюда адрес куда Вы посылаете…

  6. 17 ноября 2011 15:56

    Thumb up 0  Thumb down0 0

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

  7. 14 января 2012 01:02

    Thumb up 0  Thumb down0 0

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

  8. 24 февраля 2012 12:25

    Thumb up 0  Thumb down0 0

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

    • 2 марта 2012 16:44

      Thumb up 2  Thumb down+2 0

      Мне нужно видеть Ваш код, чтобы помочь.

  9. 24 февраля 2012 12:38

    Thumb up 0  Thumb down0 0

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

  10. 13 марта 2012 00:18

    Thumb up 0  Thumb down0 0

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

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

    • 17 марта 2012 20:01

      Thumb up 0  Thumb down0 0

      Пожалуйста.
      Не вижу блока на Вашей странице.

      • 19 марта 2012 17:35

        Thumb up 0  Thumb down0 0

        Повесил блок…

        • 24 марта 2012 22:06

          Thumb up 0  Thumb down0 0

          Видимо уже снял…

          • 24 марта 2012 22:29

            Thumb up 0  Thumb down0 0

            Вот страница stihi-na-svadbu_ru/journal/ блок справа.

          • 26 марта 2012 06:05

            Thumb up 2  Thumb down+2 0

            Прокрутка вниз до бесконечности – баг данного блока.

  11. 19 марта 2012 15:10

    Thumb up 0  Thumb down0 0

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

    • 19 марта 2012 15:23

      Thumb up 0  Thumb down0 0

      Для того, чтобы выявить проблему, мне нужно видеть код.
      Пришлите ссылку на страницу или саму страницу мне на e-mail jemand[at]yandex[dot]ru

  12. 22 марта 2012 21:13

    Thumb up 0  Thumb down0 0

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

  13. 22 марта 2012 21:21

    Thumb up 0  Thumb down0 0

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

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


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