Плавающий блок (sticky div)

Создание списка поиска

Шаг 1) Добавить HTML:

Пример

<input type=»text» id=»myInput» onkeyup=»myFunction()» placeholder=»Поиск имен..»><ul id=»myUL»>  <li><a href=»#»>Андрей</a></li>  <li><a href=»#»>Алексей</a></li>  <li><a href=»#»>Борис</a></li>  <li><a href=»#»>Владимир</a></li>  <li><a href=»#»>Сергей</a></li>  <li><a href=»#»>Кристина</a></li>  <li><a href=»#»>Татьяна</a></li> </ul>

Примечание: Мы используем href=»#» в этой демонстрации, так как у нас нет страницы, чтобы связать его. В реальной жизни это должен быть реальный URL-адрес конкретной страницы.


Шаг 2) Добавить CSS:

Стиль входного элемента и списка:

Пример

#myInput {  background-image: url(‘/css/searchicon.png’); /* Добавить значок поиска для ввода */  background-position: 10px 12px; /* Расположите значок поиска */  background-repeat: no-repeat; /* Не повторяйте изображение значка */  width: 100%; /* Полная ширина */  font-size: 16px; /* Увеличить размер шрифта */  padding: 12px 20px 12px 40px; /* Добавить немного отступов */  border: 1px solid #ddd; /* Добавить серую границу */  margin-bottom: 12px; /* Добавить некоторое пространство под входом */}#myUL {  /* Удалить стиль списка по умолчанию */  list-style-type: none;  padding: 0;  margin: 0; }#myUL li a {  border: 1px solid #ddd; /* Добавить границу для всех ссылок */  margin-top: -1px; /* Предотвращение двойных границ */  background-color: #f6f6f6; /* Серый цвет фона */  padding: 12px; /* Добавить немного отступов */  text-decoration: none; /* Удалить подчеркивание текста по умолчанию */  font-size: 18px; /* Увеличьте размер шрифта */  color: black; /* Добавить черный цвет текста */  display: block; /* Сделайте его в элемент блока, чтобы заполнить весь список */}#myUL li a:hover:not(.header) {  background-color: #eee; /* Добавить эффект наведения на все ссылки, кроме заголовков */}

Шаг 3) Добавить JavaScript:

Пример

<script>function myFunction() {  // Объявлять переменные   var input, filter, ul, li, a, i, txtValue;  input = document.getElementById(‘myInput’);  filter = input.value.toUpperCase();  ul = document.getElementById(«myUL»);  li = ul.getElementsByTagName(‘li’);  // Выполните цикл по всем элементам списка и скройте те, которые не соответствуют запросу поиска  for (i = 0; i < li.length; i++) {    a = li.getElementsByTagName(«a»);     txtValue = a.textContent || a.innerText;    if (txtValue.toUpperCase().indexOf(filter) > -1) {      li.style.display = «»;    } else {      li.style.display = «none»;    }  }} </script>

Совет: Удалить toUpperCase() если вы хотите выполнить поиск с учетом регистра.

Совет:Кроме того, проверить Фильтр таблицы.

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

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

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

Пример 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Список делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

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

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

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

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

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

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


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

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

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

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

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

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

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>

JavaScript

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

jQuery( document ).ready(function( $ ) {
	var
			$window = $( window ), // Основное окно

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

			$bottom = $( '#footer' ), // Нижний блок, за который нельзя заходить

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

			$height = $top + $target.outerHeight(), // Определяем координаты низа $target блока // Блок, который нужно фиксировать при прокрутке

			$bottom = $bottom.offset().top; // Определяем координаты низа нижнего блока // Нижний блок, за который нельзя заходить

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

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

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

			$target.css( {
				position : 'fixed',
				top : '0px',
				//width : '1%', // Может пригодиться, если блок не имеет чёткого width
			} );

			// Докрутили до низа
		} else if ( scrollTop > $top && scrollTop + $height > $bottom ) {

			// Координата верха: куда нельзя заходить - минус верх - минус высота блока рекламы
			var top = $bottom - scrollTop - $height;

			$target.css( {
				position : 'fixed',
				top : top,
			} );
		}
		// Иначе возвращаем всё назад
		else {

			$target.attr( 'style', '' );
		}
	} );
});

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

How to use it:

1. To get started, include jQuery library (OPTIONAL) and the hc-sticky plugin right before the closing body tag.

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="jquery.hc-sticky.js"></script>

2. Call the plugin on the desired element and you’re done.

// As a jQuery Plugin
$('#nav').hcSticky({
  // options
});

// As a Vanilla JS Plugin
var Sticky = new hcSticky('#nav', {
    // options
});

3. All default customization options.

$('#nav').hcSticky({

  // The distance from the top
  top: 0,

  // The distance from the bottom
  bottom: 0,

  // The distance from the bottom of the referring element
  bottomEnd: 0,

  // The distance from the top inside of the sticky content
  innerTop: 0,

  // Element at which to trigger HC-Sticky instead of top of sticky container. 
  // This has higher priority than innerTop option.
  innerSticker: null,

  // Classname of sticky element
  stickyClass 'sticky',

  // Classname of wrapper
  wrapperClassName: 'wrapper-sticky',

  // Element that represents the reference for height instead of height of the container. recalculate
  stickTo: null,

  // Object containing responsive breakpoints
  responsive: null,

  // When set to false, sticky content will not move with the page if it is bigger that Window.
  followScroll: true,

  // Direction of the responsive queries.
  mobileFirst: true,

  // Limit the rate at which the HC Sticky can fire on window resize.
  resizeDebounce: 100,

  // Disable the plugin
  disable: false
  
});

4. Execute a function when the element gets fixed.

$('#nav').hcSticky({

  onStart: function(){
    // ...
  }

});

5. Execute a function when the element stops floating.

$('#nav').hcSticky({

  onStop: function(){
    // ...
  }

});

6. Execute callback functions before & after resize.

$('#nav').hcSticky({

  onBeforeResize: function(){
    // ...
  },

  onResize: function(){
    // ...
  }

});

7. API methods.

// updates settings
$('#nav').hcSticky('update', OPTIONS);

// recalculates sticky size and position
$('#nav').hcSticky('refresh');

// attaches the sticky
$('#nav').hcSticky('attach');

// detaches the sticky
$('#nav').hcSticky('detach');

// destroy the plugin
$('#nav').hcSticky('destroy');

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения


С этим читают