Фиксированные меню, блоки при прокрутке страницы


Создаём эффект залипания при прокручивании страницы на блоках меню навигации, бокового виджета и меню с помощью jQuery и без него.

Используем Sticky JS

Библиотека на нативном javascript Sticky JS

  1. Качаете файл https://raw.githubusercontent.com/rgalus/sticky-js/master/dist/sticky.min.js
  2. Сохраняете его на хостинге, где расположен сайт, и подключаете его в шаблоне: 
    <script src="/путь_до_файла/sticky.min.js"></script>
  3. Инициализируете скрипт: 
    <script>
   var sticky = new Sticky('.selector');
</script>

    Здесь .selector — это jQuery селектор блока, который должен залипать при прокрутке.

  4. Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container

Пример HTML:

<div class="row" data-sticky-container>
  <div class="col-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
  <div class="col-8 columns">
    <h1>Sticky-js</h1>
    <p>Lorem ipsum.....</p>
  </div>
  <div class="col-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
</div>

<script src="sticky.min.js"></script>
<script>
  var sticky = new Sticky('.sticky');
</script>

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

Как сделать фиксированное меню в шапке

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

  • Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
  • Иначе отключаем залипание

Вот и вся логика.
Можете проверить, как работает

HTML

HTML будет представлять собой что-то навроде

<div id="nav">...Тут содержание навигации...</div>

JavaScript

В Javascript будем определять нашу логику

jQuery(document).ready(function($) {
  var

    $window = $(window), // Основное окно

    $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке

    $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать)

  $window.on('scroll', function() {

    // Как далеко вниз прокрутили страницу
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию
    if (scrollTop > $h) {

      $target.addClass("sheensay_fixed");

    // Иначе возвращаем всё назад
    } else {     

      $target.removeClass("sheensay_fixed");
    }
  });

});

Если не хотите включать залипание для мобильных браузеров, вам пригодится такой код:

 // Определяем мобильный браузер
 function MobileDetect() {
   var UA = navigator.userAgent.toLowerCase();
   return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i.test(UA)) ? true : false;
 }
 jQuery(document).ready(function($) {
   // Если браузер не мобильный, работаем
   if (!MobileDetect()) {
     var

       $window = $(window), // Основное окно

       $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке

       $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать)

     $window.on('scroll', function() {

       // Как далеко вниз прокрутили страницу
       var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

       // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию
       if (scrollTop > $h) {

         $target.addClass("sheensay_fixed");

         // Иначе возвращаем всё назад
       } else {

         $target.removeClass("sheensay_fixed");
       }
     });
   }
 });

CSS

В CSS определяется класс, которым фиксируем меню

.sheensay_fixed {
   position: fixed !important;
   top: 0 !important;
   margin-left: -100%;
   padding-left: 100%;
   background: rgba(255, 0, 0, 0.1);
}

Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1);, а именно в последнем параметре 0.1, варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity

Фиксированный виджет в сайдбаре

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

Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку

Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре.
Q2W3 Fixed Widget

Скачать Q2W3 Fixed Widget из официального репозитория WordPress

Как пользоваться

Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку

У каждого виджета появляется возможность залипания

У каждого виджета появляется возможность залипания

Как сделать залипающий виджет, который не налезает на низ сайта

Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:

  1. Координату Y верха виджета
  2. Высоту виджета
  3. Координату Y подвала сайта

Далее, на событии window.scroll мы считаем текущие координаты верха браузера.

  • Если координата верха браузера выше координаты верха виджета, ничего не делаем, снимаем все эффекты
  • Если прокрутили ниже верха виджета, включаем залипание
  • Если прокрутили ниже координаты подвала минус высота виджета или, проще говоря, начали налезать на подвал, отключаем залипание, включаем прописку над подвалом

HTML

<body>
  <div class="header">Header</div>
  <div class="body clearfix">
    <div class="main">
... Основное содержимое ...
    </div>
    <div class="sidebar">
... Содержимое сайдбара ...
      <div class=widget>
... Содержимое виджета ...
</div>
    </div>
  </div>
  <div class="footer">Подвал</div>
</body>

CSS

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.vbottom {
  vertical-align: bottom !important;
}

.header,
.footer {
  height: 100px;
  outline: 1px solid #CCC;
}

.footer {
  height: 500px;
  background: #FCC;
}

.body {
  display: table;
}

.main,
.sidebar {
  display: table-cell;
  width: 50%;
  outline: 1px solid #CCC;
}

.widget {
  height: 500px;
  width: 100%;
  outline: 1px solid #CCC;
  background: #CCF;
}

.sheensay_fixed {
  position: fixed !important;
  top: 0 !important;
  width: 49%;
}

.sheensay_footer_sticked {
  margin-top: 100%;
}

JavaScript

Перед скриптом необходимо загрузить jQuery

jQuery(document).ready(function($) {
  var $widget = $(".widget"),
    $footer = $(".footer"),
    $sidebar = $('.sidebar'),
    $window = $(window);

  // Определяем координаты верха блока навигации
  $widget_top = $widget.offset().top;

  // Определяем координаты верха блока подвала
  $footer_top = $footer.offset().top;

  // Определяем высоту виджета
  $widget_height = $widget.height();

  $window.scroll(function() {

    // Если прокрутили скролл ниже макушки видета и низ виджета выше макушки подвала, включаем фиксацию
    if (($window.scrollTop() > $widget_top) && ($window.scrollTop() + $widget_height < $footer_top)) {
      $widget.addClass("sheensay_fixed");
      $widget.removeClass("sheensay_footer_sticked");
      $sidebar.removeClass('vbottom');
    }
    // Если прокрутили скролл ниже макушки видета и низ виджета ниже макушки подвала, включаем залипание внизу подвала
    else if (($window.scrollTop() > $widget_top) && ($window.scrollTop() + $widget_height > $footer_top)) {
      $widget.removeClass("sheensay_fixed");
      $widget.addClass("sheensay_footer_sticked");
      $sidebar.addClass('vbottom');
    } else {
    // Отключаем все эффекты
      $widget.removeClass("sheensay_fixed");
      $widget.removeClass("sheensay_footer_sticked");
      $sidebar.removeClass('vbottom');
    }
  });
});

Делаем залипание в сайдбаре вручную, вариант №2

Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.

Предварительная подготовка

Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery

  • Создаём обёртку под будущую копию содержания статьи
  • Клонируем содержание статьи и добавляем её внутрь обёртки, подчищаем код
  • Отслеживаем координаты верха виджета.
  • Если прокрутили ниже этой верхушки, но не достигли конца статьи, фиксируем меню
  • Если достигли конца статьи, скрываем виджет меню
  • В остальных случаях оставляем как и было изначально

Код HTML

Для примера возьмём содержание этой страницы

<div class="kc__wrap">
<div id="kcmenu" class="kc-title kc_title">Содержание</div>
<ul class="contents">
<li class="top"><a href="#kak-sdelat-fiksirovannoe-menyu-v-shapke">Как сделать фиксированное меню в шапке</a></li>
<li class="sub sub_1"><a href="#html">HTML</a></li>
<li class="sub sub_1"><a href="#javascript">JavaScript</a></li>
<li class="top"><a href="#fiksirovannoe-soderzhanie-stati-v-vidzhete-v-saydbare">Фиксированное содержание статьи в виджете в сайдбаре</a></li>
<li class="sub sub_1"><a href="#predvaritelnaya-podgotovka">Предварительная подготовка</a></li>
<li class="sub sub_1"><a href="#logika">Логика</a></li>
<li class="sub sub_1"><a href="#kod-html">Код HTML</a></li>
<li class="sub sub_1"><a href="#kod-javascript">Код Javascript</a></li>
<li class="top"><a href="#v-zaklyuchenie">В заключение</a></li>
</ul>
</div>

Код Javascript

jQuery(document).ready(function ($) {
    // Определяем мобильный браузер
    function MobileDetect() {
        var UA = navigator.userAgent.toLowerCase();
        return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i.test(UA)) ? true : false;
    }

// Если не мобильная версия сайта и содержание статьи существует
if (!MobileDetect() && $('.kc__wrap').length) {

    // В сайдбар добавляем обёртку для дубля содержания статьи
    $('.sidebar').append('<section class="widget" id="post-content-list"><div class="widget-wrap" id="widget-wrap-content-list"></div></section>');

    // Клонируем содержание статьи и добавляем её внутрь обёртки
    $('.kc__wrap').clone().appendTo('#widget-wrap-content-list');

    // Счищаем ненужную обёртку
    $(".contents", '#widget-wrap-content-list').unwrap();

    // Добавляем ссылку для прокрутки вверх
    $('.content-list-title', '#widget-wrap-content-list').append('<div style="float:right" data-pr="↑ Наверх ↑" class="link gototop"></div>');

    // При клике по gototop прокручиваем вверх
    $('.gototop', '.content-list-title').on('click', function () {
        $("html, body").animate({
            'scrollTop': 0
        }, 600);
    });

    var // Объявляем переменные
    $l = $('#post-content-list'), // Контейнер виджета дубля содержания страницы

        $ot = $l.offset().top, // Координаты верха виджета, $PostContentListOffsetTop

        $lh = $l.outerHeight(true), // Высота виджета меню, $PostContentListHeight

        $p = $('.post'), // Контейнер поста

        $w = $(window); // Контейнер главного окна 

    // Если содержание не помещается в окно, удаляем его 
    if ( $lh > $w.height() ) $l.remove();

    // Обрабатываем событие скролла 
    $w.on('scroll', function () { //console.log($('.post').height(), " ",  eval($('#post-content-list').offset().top + $lh));

        // Высота статьи
        var $ph = $p.height();

        // Координаты скролла по вертикали
        var $wst = $w.scrollTop();

        // Если прошли ниже, чем макушка виджета меню...
        if ($wst > $ot &&

        // ...и если не достигли конца статьи
        $ph > $wst + $lh) {

            $l.css({
                "position": "fixed",
                    "top": 0,
                    "width": "360px"
            }).fadeIn();

        }

        // Когда дошли до конца статьи, скрываем содержание статьи 
        else if ($ph < $wst + $lh) {

            $l.fadeOut();
        }

        // Иначе убираем фиксацию
        else {

            $l.css({
                "position": "relative",
                    "top": 0,
                    "width": "360px"
            }).fadeIn();

        }

    });

}
});

В заключение

Если вам понравилась статья, но что-то не получается переделать под свои нужды, не стесняйтесь спрашивать об этом в комментариях, вместе найдём решение.


Так себеНеплохоНормальноХорошоОтлично (8 оценок, в среднем: 4,63 из 5)
Загрузка...


Фиксированные меню, блоки при прокрутке страницы

Свежие записи

Свежие комментарии