» »

Функция плавающий блок на jQuery для сайта

Функция плавающий блок на jQuery для сайта

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

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

Переходим к установке:

Как уже сказано было, что блок от сайта или вы установили рекламный блок и вам нужно чтоб как не крутили вверх или в низ он был на виду.

И начнем с того, что в низ сайта устанавливаем скрипт:

Код
<script>  
$(document).ready(function(){  
  var $scrollingBanner = $("#zornet");  
  var $footer = $("#footer");  
  var $BannerOffsetTop = 0;  
  $(window).scroll(function(){  
  if($(window).scrollTop() < ($footer.offset().top - 350)) {  
  $BannerOffsetTop = $scrollingBanner.offset().top - parseInt($scrollingBanner.css('marginTop'),0) -0;  
  if($(window).scrollTop() > $BannerOffsetTop - 0) {  
  $scrollingBanner.stop().animate({"marginTop": ($(window).scrollTop() - $BannerOffsetTop + 20) + "px"}, 0);  
  } else {  
  $scrollingBanner.stop().animate({"marginTop": 20 + "px"},0);  
  }  
  }  
  });  
});  
</script>


Теперь немного разберем его:

1. В самом почти вверху находим #block - эта функция как раз будет отвечать за тот блок, который вы подключите. А точнее вам в блок нужно прописать id="zornet" в код или баннер, что стоит в блоке. Здесь вы можете название свое написать, но чтоб они совпадали как в скрипте и блоке, который будет плавать и оставаться визуально.

2. #footer - идентификатор блока нижней части сайта на сайте. Задайте блоку футера уникальный идентификатор, и потом как обычно вписываем его в скрипт вместо этого. Но при установки на проверку не трогал эту функцию, только первую.

3. Также в скрипте находим 350 - что будет отвечать за высоту.

4. А вот 20 - это отвечает за отступ, так что на эти пиксели он будет не прилипать, а висеть от вверх монитора, если так можно выразиться.

Как пример, проверял на баннере:

Код
<center><div class="inner" id="zornet"><a href="http://goo.gl/u0Qv87" target="_blank" rel="nofollow"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/usocial.png"></a></div></center>


Видим, что id="zornet" прописан в коде и эта картинка плавает.

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

Источник: Fullweb.ucoz.ru
12.02.2017 Просмотров: 1293 Комментарий: (20)

Поделиться в социальных сетях

Материал разместил

Комментарий: 20
Kosten
Kosten 12.02.2017 01:191
+1
На счет этого скрипта демонстраций нет, вот пока он установлен на тестовом сайте, что можно посмотреть, пока стоит и не убрал. Смотрим на рекламный блог от uCoz что стоит здесь, на нем и проверял.
tsakonter
tsakonter 12.02.2017 01:452
0
Вот значит как все делается, а считал что будет на много сложней. Если у меня 2 блока с левой и с правой, то что 2 скрипта нужно как вижу ставить.
Kosten
Kosten 12.02.2017 01:503
0
Но теперь рекламные блоки будут преследовать.)
Сопрано
Сопрано 12.02.2017 18:034
0
Кто бы рекламу заказал, да не кликаберную, то поставил их баннер. 07a
Kosten
Kosten 12.02.2017 19:445
0
Почему рекламный блок - можно разглядывать и меню сайта, которое естественно всегда в этом случай будет под боком.
2004484
2004484 14.02.2017 10:496
0
в хроме блок дергается при прокрутке колесиком мышки, в эдже вообще прыгает как не прокрчивай. Видела на других сайтах все плавненько как не крути на разных браузерах.
Kosten
Kosten 14.02.2017 14:067
0
У меня последнее версия хрома и все показывает отлично.
avatar
andr8070 19.03.2017 12:598
0
Здравствуйте. Попробовал установить на сайт баннер действительно становится плавающим, но получается бесконечная прокрутка страницы, не могу добраться до нижней части сайта как в ПК так и на мобильных устройствах) В чем может быть причина. Применял для ротатора высотой 425px, в скрипте 350 заменил на 425, блок footer не трогал. Сам скрипт установил в нижнюю часть сайта (глобальные блоки) может быть не правильно понял? В ID и скрипте вместо block прописал reklama.
Kosten
Kosten 19.03.2017 13:119
0
Все делал по описанию на тестовом сайте, и все работало как нужно. Видать что то неправильно сделали.
avatar
andr8070 19.03.2017 13:2010
0
Видать так. А как выявить ошибку, то что я описал по установке сделал все верно?
avatar
andr8070 19.03.2017 13:2311
0
У меня в сайдбаре вообщем так - 1 Ротатор- 2 Ротатор - Блок группы ВК. Делал плавающим 1 ротатор, чтобы и под ним установленный ротатор тоже был в видимой части.
avatar
andr8070 19.03.2017 13:3312
0
Нашел еще одну версию небольшого скрипта для плавающего блока. Там не указано куда вставить скрипт, пробовал в нижнюю часть сайта, но без изменений. Здесь можно ссылку выложить чтобы просмотрели и дали наводку по установке.
Kosten
Kosten 19.03.2017 13:5613
0
Можете поставить ссылку, если схожие материалы, и на ваш сайт, чтоб понять что там у вас.
avatar
andr8070 19.03.2017 14:5415
0
Методом тыка вроде получилось)) Единственное при прокрутке баннеры дергаются, можно это как то убрать? Пробовал в хроме и в яндекс браузере
Kosten
Kosten 19.03.2017 14:5616
0
Методом тыка) На хроме проверял, плавно ходил, не понимаю, почему у вас не получилось, ранее демонстрация была, но на тестовом сайте, потом нечаено снес.
avatar
andr8070 19.03.2017 14:5917
0
Вы не смотрели схожий материал?
avatar
andr8070 19.03.2017 15:1718
0
Кстати дерганье происходит при прокрутке роликом, а если ползунком справа то все отлично. Может в скрипте что-то еще добавить?
1 2 »
avatar