Создаём эффект залипания при прокручивании страницы на блоках навигации, меню с помощью jQuery без дёрганий и анимации
- Как сделать фиксированное меню в шапке
- HTML
- JavaScript
- CSS
- Фиксированный виджет в сайдбаре
- Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
- Как пользоваться
- Как сделать залипающий виджет, который не налезает на низ сайта
- HTML
- CSS
- JavaScript
- Делаем залипание в сайдбаре вручную, вариант №2
- Предварительная подготовка
- Код HTML
- Код Javascript
- В заключение
Порой хочется использовать эффект залипающего меню в шапке сайта или дублирования в сайдбаре навигации по статье. Реализация задуманного не представляет большой сложности.
Для этого нам понадобится подключить библиотеку jQuery к сайту и наваять несложные скрипты.
Как сделать фиксированное меню в шапке
Всё очень просто. Всё будет основываться на том, где находится скролл на текущий момент относительно нашего меню
- Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
- Иначе отключаем залипание
Вот и вся логика.
Можете проверить, как работает
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 из официального репозитория WordPress
Как пользоваться
Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку
У каждого виджета появляется возможность залипания
Как сделать залипающий виджет, который не налезает на низ сайта
Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:
- Координату Y верха виджета
- Высоту виджета
- Координату 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)
Загрузка...