I have a div which have a menu on Elementor .I’m going to hide between my nav and after reaching 80% of the page basicly my footer. The reason i’m doing this is to prevent it from interfering with footer.
I had found some codes and i did mine , but i just hided for the firts part basically:
y > PER AND I CANT PUT THIS PART WORKINK y < PER2
https://codepen.io/nibalAn/pen/vYpXPLZ
//PER is Percentage value
var PER = 45;
var PER2 = 60;
var yInPixel, totalHeight;
//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).ready(function() {
totalHeight = $(this).height();
yInPixel = totalHeight * (PER / 100) - window.innerHeight;
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > yInPixel) {
$('.bottomMenu').fadeIn();
if (y > PER && y < PER2 ) {
document.getElementById("bottomMenu").style.visibility = "visible"; }
}
else{
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<div class="bottomMenu">
<a> menu </a> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Any idea?