hide a div between two percentages of page of scrolling

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?