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/diogomaa/pen/JjMRgJL
//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?
If your concerns are:
I can suggest an elegant solution of making the menu appear on scroll up, and disappear on scroll down. Any time the user wants access to the menu, an initiation of scroll up (reflex is usually to go up for the menu anyways) will expose the menu. Footers, located on the bottom of a webpage, need to be scrolled down to reach, thus naturally hiding the menu in the process.
var lastY = 0;
$('.bottomMenu').fadeIn();
//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).scroll(function() {
const y = $(this).scrollTop();
if (y < lastY)
$('.bottomMenu').fadeIn();
else
$('.bottomMenu').fadeOut();
lastY = y;
});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>I've posted another answer with a suggestion, but this one I believe is the actual solution you are seeking.
document.getElementById("bottomMenu").style.visibility = "visible"; to $('.bottomMenu').fadeIn();. This is essentially what you are trying to do, but bottomMenu is a class, not an id, which is what document.getElementById would require.scrollTop values, which are in pixels, to percentages. You need to get the percentage first then compare apples to apples.//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() {
const y = $(this).scrollTop(),
totalHeight = $(this).height(),
curPercent = (y / totalHeight) * 100;
if (curPercent > PER && curPercent < PER2 ) {
$('.bottomMenu').fadeIn();
}
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>