Плагин jQuery для липких боковых панелей - Theia Sticky Sidebar
28-01-2018, 18:12
0
  Блоки

Плагин jQuery для липких боковых панелей - Theia Sticky Sidebar

Плагин позволяет приклеить любые блоки страницы при её прокручивании, делая их постоянно видимыми. Это полезно когда другие блоки значительно выше чем прикрепляемый блок. Закреплять полезно например такие блоки, как вертикальное меню, рекламный блок, блок с поиском, короткие формы и т.п.
В демо есть примеры использования плагина в сетках популярных фреймворков bootstrap и foundation.

Более широкие возможности:
1. Позволяет прикрепляться к любым контейнерам (по умолчанию: родительский контейнер).
2. Поддержка нескольких боковых панелей за один раз.
3. Три липкие поведения: современный, придерживаться верхней и придерживаться нижней.
4. Мобильная связь. Позволяет отключить "Sticky", когда Размер экрана меньше определенного значения.
5. Совместимость с любыми рамками CSS, такими как Bootstrap, Foundation и т. д...

Установка:
1. Загрузите последнюю версию библиотеки jQuery и скрипт плагина Theia Sticky Sidebar в свой html-документ.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/ResizeSensor.js"></script>
<script src="dist/theia-sticky-sidebar.js"></script>


2. Добавьте класс CSS 'theiaStickySidebar' к липким боковым панелям следующим образом:


<div class="leftSidebar">
  <div class="theiaStickySidebar">
    <div class="box">
      <h2>Left Sidebar</h2>
    </div>
  </div>
</div>
<div class="rightSidebar">
  <div class="theiaStickySidebar">
    <div class="box">
      <h2>Right Sidebar</h2>
    </div>
  </div>
</div>


3. Прикрепите плагин к боковым панелям
  $('.leftSidebar, .rightSidebar').theiaStickySidebar();


На этом все.

4. Возможные параметры плагина для настройки липких боковых панелей.

$('.leftSidebar, .rightSidebar').theiaStickySidebar({
  // container element
  'containerSelector': '',
  // top/bottom margiin in pixels
  'additionalMarginTop': 0,
  'additionalMarginBottom': 0,
  // auto up<a href="https://www.jqueryscript.net/time-clock/">date</a> height on window resize
  'updateSidebarHeight': true,
  // disable the plugin when the screen size is smaller than...
  'minWidth': 0,
  // disable the plugin on responsive layouts
  'disableOn<a href="https://www.jqueryscript.net/tags.php?/Responsive/">Responsive</a>Layouts': true,
  // or 'stick-to-top', 'stick-to-bottom'
  'sidebarBehavior': 'modern',
  // or 'absolute'
  'defaultPosition': 'relative',
  // namespace
  'namespace': 'TSS'
});

Комментарии

Никто еще не оставил комментариев – станьте первым!

Напишите своё мнение