Breaking News: Grepper is joining You.com. Read the official announcement!

Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

Alert Addax answered on May 30, 2022 Popularity 6/10 Helpfulness 1/10

answer Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

related Elementor sticky headerhide on scroll

Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

Comment

<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>

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: element.how

Tags: elementor header hide javascript scroll show sticky

Link to this answer
Share Copy Link

Contributed on May 30 2022

Alert Addax

0 Answers Avg Quality 2/10

Closely Related Answers

Elementor sticky headerhide on scroll

Comment

<!-- Hide and Show Desktop Header -->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("hide-header").style.top = "0";
  } else {
    document.getElementById("hide-header").style.top = "-80px"; /* adjust this value to the height of your header */
  }
  prevScrollpos = currentScrollPos;
}
</script>

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: lytboxacademy.com

Tags: scroll elementor javascript sticky

Link to this answer
Share Copy Link

Contributed on Aug 11 2023

Inquisitive Ibis

0 Answers Avg Quality 2/10

Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

Contents

More Related Answers

Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

Closely Related Answers

Elementor sticky headerhide on scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.