在滾動頁面的兩個百分比之間隱藏一個div

我有一個在 Elementor 上有一個選單的 div。我將隱藏在我的導航之間，并且在達到頁面的 80% 之后基本上是我的頁腳。我這樣做的原因是為了防止它干擾頁腳。

我找到了一些代碼，我做了我的，但我基本上只是隱藏了第一部分：

y > PER ，我不能把這部分作業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>

任何想法？

uj5u.com熱心網友回復：

我已經發布了另一個帶有建議的答案，但我相信這個答案是您正在尋求的實際解決方案。

1. 更改document.getElementById("bottomMenu").style.visibility = "visible";為$('.bottomMenu').fadeIn();。這本質上是你想要做的，但bottomMenu它是一個類，而不是一個 id，這是document.getElementById需要的。
2. 您正在將原始scrollTop值（以像素為單位）與百分比進行比較。您需要先獲得百分比，然后將蘋果與蘋果進行比較。

//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>

uj5u.com熱心網友回復：

如果您的擔憂是：

1. 底部選單
2. 輕松訪問選單
3. 不要覆寫頁腳

我可以建議一個優雅的解決方案，讓選單在向上滾動時出現，在向下滾動時消失。每當用戶想要訪問選單時，向上滾動的啟動（反射通常是向上滾動選單）將顯示選單。位于網頁底部的頁腳需要向下滾動才能到達，因此在此程序中自然會隱藏選單。

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>

標籤：javascript html jQuery css

上一篇：使用jQuery獲取名稱并創建多維陣列

下一篇：JqueryDatepicker：日期格式不起作用？