為了給瀏覽頁面的用戶提供更快捷方便的導航，很多網站都提供了導航菜單欄隨滾動條上下滾動，以減少用戶不必要的操作，提高網站用戶粘度。而且很多網站把導航條固定在頁面頂部，看起來不錯，但是有時候當我們想在頁面上呈現很多東西的時候，會覺得固定在頂部的導航條是多余的。
這時候可以使用headroom.js，讓網頁向下滾動時，頂部的導航欄自動關閉(隱藏)；當網頁向上滾動時，頂部的導航欄會自動出現(顯示)。這會給我們的頁面更多的空間，開闊我們的視野。請滑動本頁，觀察本站導航欄的變化！
Headroom.js的工作原理是感知目標元素的三種不同狀態(原始、向下滾動、向上滾動)，為目標元素改變對應的類，通過對應類的css樣式的改變，得到想要的效果。
下面是實現方法:
第壹種方式(推薦)
首先，在頁腳中加載以下js:
& ltscript type = " text/JavaScript " src = "/headroom . js @ 0 . 9 . 3/dist/headroom . min . js " & gt；& lt/script & gt；& lt腳本& gt(function () {New Headroom(文檔。查詢選擇器(" # nav-scroll "))，{//這裏的nav-scroll改為妳的導航欄id或classoffset:5，//元素未固定前的垂直偏移量(以px為單位)容差:5，//scroll tolerance inbeforestatechanges classes:{ initial:" animated "，//Classpinned元素初始化時:" SlideUp "，//classunpinned:"slideDown"//向上滾動時:" slide down "//Class })。init()；}());& lt/script & gt；然後，加上風格就結束了:
。動畫{位置:固定；top:0；左:0；右:0；過渡:all . 2緩入緩出；} . animated . slide down { top:-100 px；} . animated . slide up { top:0；}其中類要對應上面的js！
第二種方式:
首先依次介紹以下四個j，註意順序不對，嚴格遵守！
& ltscriptsrc = "/jquery/1.10.2/jquery . min . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " src = "/headroom . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " src = "/WickyNilliams/headroom . js/master/src/jquery . headroom . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " & gt；$(".navbar-固定頂部”)。凈空()；& lt/script & gt；其中包含了第壹個jquery通用wordpress主題，不用再加載了；。navbar-fixed-top是導航欄的類(或id)。
然後，介紹壹下css就可以了:
。凈空{位置:固定；top:0；左:0；右:0；過渡:all . 2緩入緩出；}.凈空-未釘住{ top:-100 px；}.凈空高度-固定{ top:0；}我們來舉個具體的例子，用editplus或者其他編輯器保存為html頁面，雙擊看看效果。修改自@大學IT網
& lt！DOCTYPEhtml & gt& lthtml & gt& lthead & gt& lttitle & gtbootstrap 101 template & lt；/title & gt；& ltmeta name = " viewport " content = " width = device-width，initial-scale=1.0 " >& lt！-Bootstrap->；& ltlinkrel = " style sheet " href = "/Twitter-bootstrap/3 . 0 . 3/CSS/bootstrap . min . CSS " & gt；& ltlinkrel = " style sheet " href = " I:/網頁/animate/animate . CSS " & gt；& lt！-html 5 shimanderrespond . jsie 8 supportofhtml 5 elementsandmediaqueries-& gt；& lt！-警告:Respond.jsdoesn不tworkifyouviethepageviafile://-& gt；& lt！-[ifl tie 9]>；& ltscript src = "/html 5 shiv/3 . 7 . 0/html 5 shiv . min . js " & gt；& lt/script & gt；& ltscriptsrc = "/respond . js/1 . 3 . 0/respond . min . js " >& lt/script & gt；& lt！[endif]-& gt；& ltstyletype="text/css " >。凈空{位置:固定；top:0；左:0；右:0；過渡:all . 2緩入緩出；}.凈空-未釘住{ top:-100 px；}.凈空高度-固定{ top:0；} & lt/style & gt；& ltstyletype="text/css " >。scroll spy-example { height:1200 px；溢出:自動；位置:相對；} & lt/style & gt；& lt/head & gt；& ltbody & gt& lt！-標題的大屏幕顯示-& gt；& ltdivclass="jumbotron " >& ltdivclass="container " >& lth 1 & gt；妳好，世界！& lt/h 1 & gt；& ltp & gtthisistamplateforsimplemarketingoriformationalwebsite . it includesargelalloutcalldajumbotronandthreesupportingpiecesofcontent . useitasastartingpointtocreatesomething more unique。/p & gt；& ltp & gt& ltaclass = " btnbtn-primary BTN-LG " role = " button " & gt；Learnmore & lt/a & gt；& lt/p & gt；& lt/div & gt；& lt/div & gt；& ltdivclass="container " >& lt！-導航欄->；& ltnav class = " navbarnvbar-inversenavbar-fixed-top " role = " navigation " id = " example " & gt。& ltdivclass="navbar-header " >& lta class = " navbar-brand " href = " # " & gt；w3school & lt/a & gt；& lt/div & gt；& ltdiv class = " collapse navbar-collapse " id = " tem " & gt。& ltulclass="navnavbar-nav " >& ltliclass = " active " & gt& ltahref = " # php " & gtPHP & lt/a & gt；& lt/李& gt& lt李& gt& ltahref = " # js " & gtJS & lt/a & gt；& lt/李& gt& ltliclass="dropdown " >& ltah ref = " # " class = " drop down-toggle " data-toggle = " drop down " & gt；數據庫& ltbclass="caret " >& lt/b & gt；& lt/a & gt；& ltulclass= "下拉菜單" >& lt李& gt& ltahref = " # mysql " & gtMySQL & lt/a & gt；& lt/李& gt& lt李& gt& ltahref = " # pgsql " & gtPostgreSQL & lt/a & gt；& lt/李& gt& lt李& gt& ltahref = " # mgdb " & gtMogoDB & lt/a & gt；& lt/李& gt& lt/ul & gt；& lt/李& gt& lt/ul & gt；& lt/div & gt；& lt/nav & gt；& lt！-主要內容->；& ltdiv data-spy = " scroll " data-target = " # example " data-offset = " 0 " class = " scroll spy-example " & gt；& lth4id = " php " & gtPHP & lt/H4 & gt；& ltp & gtPHP是壹種廣泛使用的通用腳本語言。？itisanhtmlembedddescriptinglanguageandisespeciallysuitedforwebdevelopment。基礎的syntaxofPHPissimilartoC，Java，andPerl，andiseasytolearn。phpiusedforcreatinginteractiveanddynamicwebpagesquickly，但youcandomuchmorewithPHP。& lt/p & gt；& lth4id = " js " & gtJS & lt/H4 & gt；& ltp & gtJavaScript跨平臺、面向對象的scriptinglanguagedevelopedbynetscape。javascriptwascuredbynetscapeprogrammerbrendaneich . itwasfirreleasedunderthenameflivescriptaspar to Netscape navigator 2.0 in September 1995。itwasrenamed JavaScript ondecember 4，1995。作為JavaScriptworksontheclientside，它主要用於客戶端web開發。& lt/p & gt；& lth4id = " mysql " & gtMySQL & lt/H4 & gt；& ltp & gtmysqltutorialfow3cschoolisacomphensivetutorialtolernmysql。我們已經發現了上百個例子。thisshelpsyoutolearnhowcreatephp-MySQLbasedwebapplications。& lt/p & gt；& lth4id = " pgsql " & gtPostgreSQL & lt/H4 & gt；& ltp & gt1986國防高級研究項目委員會(DARPA)、美國國家研究中心(ARO)、美國國家科學基金會(NSF)以及由michaelstonebrakesr領導的。in 1987第壹個demoversionoftheprojectisrelease。6月1989日，版本1被釋放到外部用戶。版本2和版本3分別發布於1990和1991。版本3 hadsupportformultiplesoragemanagers，anqueryexecutorwasimproved，rulesystemwasrewritten。此後，postgreshaes開始實施各種research和development項目。例如，在late1992中，postgresbcametheprimarydatamanagerforthesequoia 2000 scientificcomputingproject 4。user community aroundtherprojectalshabeenstartedincreasing；到了1993，翻了壹倍。& lt/p & gt；& lth4id = " mgdb " & gtMongoDB & lt/H4 & gt；& ltp & gtthetermnosqlwascoinedbycarlostrozzi in theyear 1998。HeusedthistermtonamehisOpenSource是壹個開源的、輕量級的、沒有SQL接口的數據庫。在2009年初，當last . fmwanted toorganizeaneventonopen-source distributed databases，EricEvans，aRackspaceemployee，重用了termtoreferdatabases，它們是非關系的、分布式的、不壹致的原子性、壹致性、隔離性、持久性——傳統關系數據庫系統的四個明顯特征。& lt/p & gt；& ltp & gt在readingthelargesthirdpartyonlinemysqltutorialbyw3school之後，youwillbeabletoinstall，manageanddevelopPHP-mysqlwebapplicationsbyouown。我們有壹個全面的SQLTUTORIAL，它將幫助您在各種條件下準備請求獲取數據。& lt/p & gt；& lt/div & gt；& lt/div & gt；& lt！-jQuery(necessaryforBootstrap ' sjavascriptplugins)-& gt；& ltscriptsrc = "/jquery/1.10.2/jquery . min . js " & gt；& lt/script & gt；& lt！- Includeallcompiledplugins(如下)，或includeindividual files as needly-& gt；& ltscriptsrc = "/Twitter-bootstrap/3 . 0 . 3/js/bootstrap . min . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " src = "/headroom . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " src = "/WickyNilliams/headroom . js/master/src/jquery . headroom . js " & gt；& lt/script & gt；& ltscript type = " text/JavaScript " & gt；$(".navbar-固定頂部”)。凈空()；& lt/script & gt；& lt/body & gt；& lt/html & gt；
如果上面引用的headroom.js無效，建議搜索:JavaScript庫。