首頁 > web前端 > css教學 > 如何建立滾動時附加到頂部的黏性導覽列?

如何建立滾動時附加到頂部的黏性導覽列?

Susan Sarandon
發布: 2024-11-19 13:40:02
原創
643 人瀏覽過

How do I create a sticky navigation bar that attaches to the top upon scrolling?

建立捲動時附加到頂部的黏性導覽列

問題:

設計位於可見頁底部的導覽列最初。當使用者向下捲動時,導覽列會上升,直到固定在頁面頂部。

解決方案:

此解決方案涉及利用 jQuery 和 JavaScript 根據滾動位置。

實作:

  1. HTML:

    <div>
    登入後複製
  2. < :

    #banner {
      height: 273px;
    }
    
    #nav_bar {
      height: 30px;
    }
    
    $(document).ready(function() {
      $(window).scroll(function () {
        if ($(window).scrollTop() > 550) {
          $('#nav_bar').addClass('navbar-fixed-top');
        }
        if ($(window).scrollTop() < 551) {
          $('#nav_bar').removeClass('navbar-fixed-top');
        }
      });
    });
    登入後複製
  3. 進一步說明:

調整JavaScript 中的值(550 和551)以符合滾動位置的確切位置導覽列應該修復。
  • 此解決方案可以應用於需要保持固定在特定滾動位置的其他元素。

以上是如何建立滾動時附加到頂部的黏性導覽列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板