使用香草JavaScript創建一個智能的Navbar-css教學-PHP中文網

使用香草JavaScript創建一個智能的Navbar

粘性或固定的導航是一種流行的設計選擇，因為它使用戶可以持續訪問該網站。另一方面，它會佔用頁面上的空間，有時涵蓋內容是一種不吸引人的方式。

可能的解決方案？智能導航。

讓我們將“智能導航”定義為：

在頁面頂部可見
當用戶向上移動頁面時可見（無論他們滾動到哪裡）
當用戶向下移動頁面時隱藏

這是一個可能起作用的示例：

這是粘性定位的所有便利性，並具有增加全屏好處。這種智能導航通常已經很常見了（在許多移動瀏覽器中考慮URL欄），但有時在沒有庫或插件的情況下進行了麻煩。因此，在本文中，我們將討論如何使用CSS和Vanilla JavaScript構建一個。

旁注：人們對向下滾動頁面的含義有不同的定義（想像一下某些觸控板偏好在您的手指向下移動時如何向上滾動頁面）。為了本文，向下滾動是指向頁面底部移動。

讓我們看一下代碼

這是一些示例html。我們的智能導航將是位於上方的：

 
  <div>
    標識
  </div>
  <div>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">鏈接1 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">鏈接2 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">鏈接3 </a>
    <a href="%E2%80%9C%EF%BC%83%E2%80%9D">鏈接4 </a>
  </div>

<ain>
  
</ain>

登入後複製

重要的是要注意，元素僅相對於其父容器而粘。的父容器應為身體標籤；它不應將其放置在頁面上的另一個標籤中。

我們的智能導航的CSS看起來像這樣：

 nav {
  位置：粘性；
  頂部：0;
  顯示：Flex;
  彈性包：包裹；
  正當：中間的空間；
  填充：1.5REM 2REM；
  背景色：#EAEAEA;
}

登入後複製

現在，我們需要檢測用戶何時滾動頁面及其滾動的方向。如果用戶上次滾動位置的值小於其當前滾動位置的值，則用戶正在向下滾動。打破邏輯，我們需要：

定義一個可存儲先前滾動位置的變量
分配一個變量以檢測當前滾動位置設置為頁面的滾動偏移

如果當前的滾動位置大於以前的滾動位置，則用戶向下滾動。讓我們調用我們的功能ISSCrollingDown：

讓上crollPosition = 0;

const issCrollingDown =（）=> {
  令CurrentsCrolledPosition = Window.scrolly || window.pageyOffset;
  讓滾動下降；

  if（currentscrolledposition> tedestscrollPosition）{
    滾動= true;
  } 別的 {
    滾動下= false;
  }
  前旋轉= CurrentsCrolledPosition;
  返回滾動;
};

登入後複製

這是該功能如何工作的視覺表示：

使用此邏輯，我們可以檢測到頁面向下滾動何時向下滾動，因此我們可以使用它來切換我們的NAV樣式：

 const nav = document.queryselector（'nav'）;

const handlenavscroll =（）=> {
  if（issCrollingDown（））{
    nav.classlist.add（'滾動'）;
    nav.classlist.remove（'滾動'）
  } 別的 {
    nav.classlist.add（'滾動'）;
    nav.classlist.remove（'滾動'）
  }
}

登入後複製

如果用戶向下滾動，我們將分配一個.scroll-down類，其中包含我們何時向下移動的樣式方法。我們可以將我們的 CSS更新到此：

 nav {
  / *默認樣式 */
  過渡：前500毫秒易於進出；
}

nav.scroll-up {
  頂部：0;
}

nav.scroll-down {
  頂部：-100％；
}

登入後複製

通過這種樣式，的最高屬性值設置為頁面高度的-100％，因此它滑出了視圖。我們還可以選擇通過翻譯或褪色來處理我們的樣式 - 無論動畫最有效。

表現

每當我們與滾動活動聽眾一起工作時，性能就應該立即想到。現在，我們每次用戶滾動頁面滾動時都會調用我們的功能，但是我們不需要檢測每個像素運動。

對於這種情況，我們可以實現節氣門功能。節氣門函數是一個高階函數，可作為傳遞到其函數的計時器。如果我們以250ms的計時器進行滾動事件，則在用戶滾動時，該事件只會每250ms調用一次。這是限制我們調用該功能並幫助頁面性能的次數的好方法。

大衛·科巴喬（David Corbacho）在本文中更深入地研究了油門實現。

JavaScript中的一個簡單的油門實現如下：

 //初始化油門線變量
var Throttlewait;

const throttle =（回調，時間）=> {
  //如果變量為真，請勿運行該功能
  if（油門華）返回；

  //將等待變量設置為真實暫停功能
  ThrottleWait = true;

  //使用settimeout在指定的時間內運行該功能
  settimeout（（）=> {
    打回來（）;

    //一旦計時器開始重新啟動節氣門函數，將節流WAIT設置為false
    ThrottleWait = false;
  }， 時間）;
}

登入後複製

然後，我們可以在油門內包含我們的HandlenavsCroll功能：

 window.addeventlistener（“ scroll”，（）=> {
  油門（HandlenavsCroll，250）
}）;

登入後複製

通過此實現，HandlenavsCroll功能僅調用一次每250ms一次。

可訪問性

每當在JavaScript中實現自定義功能時，我們都必須始終關注可訪問性。這樣的問題是確保當焦點焦點時可見。瀏覽器傾向於滾動到默認情況下目前具有焦點的頁面部分，但是在處理滾動事件時可能會有某些複雜性。

確保始終可見的一種方法是更新CSS以解釋重點。現在我們的CSS看起來像這樣：

 nav.scroll-up，
NAV：焦點 -  {
  頂部：0;
}

登入後複製

不幸的是，在所有瀏覽器中都沒有完全支持焦點選擇器。我們可以為此提供JavaScript後備：

 const handlenavscroll =（）=> {
  if（issCrollingDown（）&&！nav.contains（document.activeElement））{
    nav.classlist.add（'滾動'）;
    nav.classlist.remove（'滾動'）
  } 別的 {
    nav.classlist.add（'滾動'）;
    nav.classlist.remove（'滾動'）
  }
}

登入後複製

在此更新的功能中，我們僅在用戶向下滾動頁面滾動並且當前沒有任何焦點的元素時應用滾動類。

可訪問性的另一個方面是考慮到某些用戶可能不想在頁面上使用任何動畫。這是我們可以通過偏愛的動作CSS媒體查詢來檢測和尊重的。我們可以在JavaScript中更新此方法，並防止我們的功能完全運行，如果用戶更喜歡減少運動：

 const MediaQuery = window.matchmedia（“（預先還原的動作：降低）”）;

window.addeventlistener（“ scroll”，（）=> {
  如果（MediaQuery &&！MediaQuery.Matches）{
    油門（HandlenavsCroll，250）
  }
}）;

登入後複製