hide a div between two percentages of page of scrolling

Issue

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?

Solution

I've posted another answer with a suggestion, but this one I believe is the actual solution you are seeking.

1. Change 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.
2. You are comparing raw 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>

Answered By - maraaaaaaaa