Оглавление

↑ наше социальное

Elementor Скрывает липкий заголовок (sticky header) при прокрутке вниз — Показывает при прокрутке вверх

Никаких дополнительных подключаемых модулей не требуется! Но обязательно наличие Elementor Pro.

Довольно просто сделать так, чтобы любой элемент на странице или липкий хедер  были скрыты при прокрутке страницы вниз и отображались при повторной прокрутке страницы вверх.
 
Для начала создайте хедер и сделайте его «липким», для этого также потребуется задать цвет фона элемента, чтобы не сливалось с фоном сайта.
 
stickyheader липкий заголовок
 
Затем присвойте этому разделу заголовка CSS-ID «stickyheaders» Также присвойте ему значение z-индекса, равное 199 или выше (чтобы всегда был сверху).
 
 

Наконец, добавьте этот код в html-код на странице.


Этот html-код должен находиться на той же странице, что и заголовок. Если вы создаете его в шаблоне заголовка, поместите html-код где-нибудь в шаблоне заголовка.
				
					<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
let scrolling = false; /* For throlling scroll event */
window.addEventListener('scroll', function() {
scrolling = true;
});
setInterval(() => {
if (scrolling) {
scrolling = false;
if (mypos > 40) {
if (mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}
}, 300);
});
});

</script>
<style>
#stickyheaders{
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

				
			

Вот и все! Если ваш раздел является начальным на странице или шаблоне.

Если ваш заголовок stickyheader не является самым первым разделом страницы или шаблона, вам нужно будет его изменить

if (mypos > 40) {

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

пример: if (mypos > 740) {

Как с вами связаться?

Как удобнее Вам связаться?