簡體   English   中英

JS 在滾動效果上顯示/隱藏 header - 但僅在 header 向上滾動並超出 window 之后

[英]JS Show / hide header on scroll effect - but only after the header has scrolled up and out of window

我有一些簡單的 Javascript。向下滾動時 header 消失了。 向上滾動時會出現 header。 這一切都很好:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.querySelector("header").style.top = "0";
  } else {
     document.querySelector("header").style.top = "-7.2rem";
  }
  prevScrollpos = currentScrollPos;
}




header {
    background-color: rgb(255, 255, 255);
    height: 7.2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.2s ease-in-out;
    z-index: 100;
}

但是,當頁面位於 window 的頂部時,用戶向下滾動,即使滾動 1px,header 也會消失,從而在 header 所在的位置留下很大的空白。 滾動腳本上的顯示/隱藏是否有可能僅在 header 從瀏覽器 window 頂部消失后才開始? 即效果僅在 header 的高度滾動后開始(以便用戶看不到空白區域)即 header 不是固定的,而是相對的。 它向上滾動出window。然后效果開始:向下滾動=沒有header/向上滾動=header固定在window的頂部。

有兩種方法可以做到這一點,具體取決於您想要的行為。 在這兩種情況下,我們都希望獲取標題元素及其位置:

var headerDiv = document.querySelector("header");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;

這意味着在滾動中,我們可以檢查是否通過了標題:

    if (window.pageYOffset >= headerBottom)

1:標題正常滾動出視圖,向上滾動時固定到頂部

在這個版本中,當向下滾動時,標題會滾動到視圖之外,但是當您開始向上滾動時,它會固定在屏幕頂部。

完整的工作示例:

 var prevScrollpos = window.pageYOffset; /* Get the header element and it's position */ var headerDiv = document.querySelector("header"); var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight; window.onscroll = function() { var currentScrollPos = window.pageYOffset; /* if scrolling down, let it scroll out of view as normal */ if (prevScrollpos <= currentScrollPos ){ headerDiv.classList.remove("fixedToTop"); headerDiv.style.top ="-7.2rem"; } /* otherwise if we're scrolling up, fix the nav to the top */ else{ headerDiv.classList.add("fixedToTop"); headerDiv.style.top = "0"; } prevScrollpos = currentScrollPos; }
 body{ margin: 0;} header { background: blue; height: 7.2rem; transition: all 0.2s ease-in-out; z-index: 100; } .content { height:1000px; } header.fixedToTop { position: fixed; top: 0; left: 0; right: 0; } /* add space for fixed header when it's fixed to top */ header.fixedToTop + .content{ margin-top:8rem; }
 <header></header> <div class="content" id="contentdiv"> <h1>My Page</h1> <p>Content 1</p><p>Content 2</p><p>Content 3</p><p>Content 4</p><p>Content 5</p> <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p> <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p> </div>

這是如何工作的

我們需要從標題中刪除固定定位並將其添加到我們將應用於滾動的類(例如fixedToTop )中:

header {
    height: 7.2rem;
    transition: all 0.2s ease-in-out;
    z-index: 100;
}
header.fixedToTop {
    position: fixed;
    top: 0; left: 0; right: 0;
}

現在滾動函數的邏輯非常簡單:

  1. 如果我們向下滾動,則讓標題滾動出視圖 - 刪除fixedToTop類。
  2. 如果我們向上滾動,添加我們的fixedToTop類,這將使它出現

請注意,我們需要顯式設置top的值以使過渡動畫起作用,因此我們也在代碼中執行此操作。

把這些放在一起,我們得到以下滾動函數:

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  /* if scrolling down, let it scroll out of view as normal */
  if (prevScrollpos <= currentScrollPos ){
      headerDiv.classList.remove("fixedToTop");
      headerDiv.style.top ="-7.2rem";
  }
  /* otherwise if we're scrolling up, fix the nav to the top */
  else{  
      headerDiv.classList.add("fixedToTop");
      headerDiv.style.top = "0";
  }

  prevScrollpos = currentScrollPos;
}

2:標題是固定的,直到我們滾動經過它通常會消失的地方; 向上滾動時固定在頂部

在這種情況下,標題是固定的,直到我們滾動通過它會消失的“自然”位置。

工作示例:

 var prevScrollpos = window.pageYOffset; /* Get the header element and it's position */ var headerDiv = document.querySelector("header"); var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight; window.onscroll = function() { var currentScrollPos = window.pageYOffset; /* if we're scrolling up, or we haven't passed the header, show the header at the top */ if (prevScrollpos > currentScrollPos || currentScrollPos < headerBottom){ headerDiv.style.top = "0"; } else{ /* otherwise we're scrolling down & have passed the header so hide it */ headerDiv.style.top = "-7.2rem"; } prevScrollpos = currentScrollPos; }
 header { background: blue; height: 7.2rem; position: fixed; top: 0; left: 0; right: 0; transition: top 0.2s ease-in-out; z-index: 100; } .content { height:1000px; margin-top:8rem; /* add space for fixed header */ }
 <header></header> <div class="content" id="contentdiv"> <h1>My Page</h1> <p>Content 1</p><p>Content 2</p><p>Content 3</p><p>Content 4</p><p>Content 5</p> <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p> <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p> </div>

這是如何工作的

滾動功能中的邏輯是這樣的:

  1. 如果我們向上滾動,則顯示標題:
  2. 如果我們向下滾動...
  3. ...如果我們滾動通過了標題,隱藏它
  4. ...否則顯示它

把這些放在一起,我們得到以下滾動函數:


var prevScrollpos = window.pageYOffset; // save the current position

window.onscroll = function() {
   var currentScrollPos = window.pageYOffset;

  /* if we're scrolling up, or we haven't passed the header, show the header */
  if (prevScrollpos > currentScrollPos  || currentScrollPos < headerBottom){  
      headerDiv.style.top = "0";
  }
  else{
      /* otherwise we're scrolling down & have passed the header so hide it */
      headerDiv.style.top = "-7.2rem";
  } 

  prevScrollpos = currentScrollPos;
}

也許您可以將滾動位置與元素的高度進行比較:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
   var currentScrollPos = window.pageYOffset;
   if (prevScrollpos > currentScrollPos) {
     document.querySelector("header").style.top = "0";
   } else if (currentScrollPos > document.querySelector("header").offsetHeight) {
     document.querySelector("header").style.top = "-7.2rem";
   }
   prevScrollpos = currentScrollPos;
}

header {
    background-color: rgb(255, 255, 255);
    height: 7.2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.2s ease-in-out;
    z-index: 100;
}

我使用了 FluffyKitten 提供的第一個答案,效果很好。 謝謝你。 我會在那里發表評論,但我缺乏這樣做的聲譽。

為了幫助其他人,在實現 FluffyKitten 的第一個答案時,我了解到標題和 .content 的垂直對齊方式在(a)加載或刷新(頁面上尚未滾動,因此未固定到頂部)與(b)滾動后固定到頂部之間略有不同,因為只有正文邊距設置為 0。

我不僅將 body 元素邊距設置為 0(就像 FluffyKitten 所做的那樣),而且還必須將頁眉和 .content 元素的上邊距設置為 0,以防止我的網頁第一次加載或刷新時出現小的垂直布局差異(當標題不是fixedToTop 時)與向上滾動后標題為fixedToTop 時。

WordPress可以嗎?

是的,可以使用 JavaScript 和 CSS 在 WordPress 中執行此操作。有幾種方法可以做到這一點,但一種常見的方法是使用 WordPress 插件,它允許您將自定義 JavaScript 和 CSS 添加到您的站點

安裝插件后,您可以按照我上面提到的相同步驟在向下滾動時隱藏 header 並在向上滾動時顯示它。

這是您如何執行此操作的示例:

  1. 安裝並激活插件,例如“Custom CSS and JS”或“Simple Custom CSS and JS”。

  2. 創建一個 JavaScript 文件並添加我上面提到的代碼來檢測滾動並相應地設置 header 的樣式:

      const header = document.querySelector('#header'); 讓 previousScrollPosition = 0;  window.addEventListener('scroll', function() { const currentScrollPosition = window.scrollY; if (currentScrollPosition > previousScrollPosition) { // 向下滾動 header.style.transform = 'translateY(-100%)'; } else { //向上滾動 header.style.transform = 'translateY(0)'; } previousScrollPosition = currentScrollPosition; });
  3. 創建一個 CSS 文件並添加樣式以在向下滾動時隱藏 header:

      #header { position:已修復; 頂部:0; 左:0; 寬度:100%; 過渡:所有 0.3 秒緩出; 變換:翻譯Y(-100%);  }
  4. 在您的 WordPress 管理面板中,go 到“自定義 CSS 和 JS”或“簡單自定義 CSS 和 JS”部分,並添加您的 JavaScript 和 CSS 文件。 請務必將 select 選項應用於您網站上的所有頁面。

有了這個,您應該在向下滾動時隱藏 header 並在您的 WordPress 網站上向上滾動時出現。

我希望這可以幫助您了解如何在 WordPress 上執行此操作。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM