Фиксированный плавающий блок при прокрутке на JS


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

Установка
Вставляем наш скрипт в main.tpl либо подключаем в любой js файл

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

Теперь если мы хотим зафиксировать какой-нибудь элемент нашего шаблона, достаточно добавить идентификатор #fixed: id="fixed"
Например:
<div id="fixed">
<div class="panel panel-default">
  <div class="panel-heading">Заголовок панели</div>
  <div class="panel-body">
    Содержимое панели
  </div>
</div>
</div>
Надеюсь статейка пригодится ;)скачать dle 11.1смотреть фильмы бесплатно


Комментариев 8
  1. Predators
    How to make this item swim only in pc and not on smartphones?
    1. Stanislavskiy11 Админ Ответ
      I did not think about it, I will think up something and write
  2. Predators
    However, all is well in the cell, I checked it on the PC and website is scrolled in the down indefinitely
    1. Stanislavskiy11 Админ Ответ
      I'll think of something
  3. Илья
    Помогите пожалуйста дописать рандом для кода js, мне требуется что бы при обновлении страницы на сайте выводилось постоянно разное сообщение "Уведомление" щас оно работает исключительно по порядку то есть при повторном обновлении страницы Уведомление начинают показываться по новой.

    Тема на форуме 1  Тема на форуме 2
  4. огромное спасибо уже взял на вооружение
  5. legallaz
    Добрый день. Статья очень помогла, долго искал подобный скрипт.
    Всё работает, но столкнулся с такой проблемой:
    - надо чтобы этот скрипт отключался, когда человек смотрит сайт через телефон.

    Как это сделать?
    1. Stanislavskiy11 Админ Ответ
      Попробуйте вот этот скрипт

Внимание!

Ознакомьтесь со статьёй по ссылке ниже.

Сайт мошенников
Информация