hide a div between two percentages of page of scrolling-CodePudding

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 >
<a> menu  </a> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Any idea?

CodePudding user response：

If your concerns are:

Bottom menu
Easy access to menu
Don't cover footer

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 >
<a> menu  </a> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CodePudding user response：

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

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.
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 >
<a> menu  </a> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>