Hello
Currently my header dissaperars when scrolling down and reapers when scrolling up,
I want to make it so that when the header isnt shown (after you scroll down) you can make the header reappear if you hover over the first 100px of the screen (thats how big the header is)
I am struggling to add to my JS to make this work
Here is my code snippet
add_action('wp_footer', 'custom_hide_header_script');
function custom_hide_header_script() {
?>
<script type="text/javascript">
(function() {
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("scrolling-header").style.top = "0";
} else {
document.getElementById("scrolling-header").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
}
})();
</script>
<?php
}
Here is my CSS
/* Logo */
.logo img {
max-width: 140px;
height: auto;
transition: all 1s ease;
}
.elementor-sticky–effects .logo img {
max-width: 120px;
height: auto;
}
/* Header background */
.elementor-sticky–effects {
background-color: rgba(255, 255, 255, 1) !important;
}
/* Container height */
.elementor-sticky–effects > .elementor-container {
min-height: 90px;
}
/* Navigation links color change */
.elementor-sticky–effects .header-text ul li a {
color: #7a7a7a !important;
}
/* Button color and border change */
.elementor-sticky–effects .button-text a {
color: #7a7a7a !important;
border-color: #7a7a7a !important;
transition: color 0.5s ease, border-color 0.5s ease;
}
.elementor-sticky–effects .icon-text svg {
fill: #7a7a7a !important;
transition: all 0.5s ease
}