這個在右側的菜單/功能 在滑動時隱藏、不滑動時出現，其實和在頂部的菜單欄出現/隱藏的原理是壹樣的。
為了給瀏覽頁面的用戶提供更快捷、方便的導航，很多網站都提供了導航菜單欄隨滾動條上下滾動的做法，以減少用戶不必要的操作來提高網站用戶粘度。並且很多的網站把導航條固定在網頁的頂上，這樣雖然好看，但是有的時候我們要在頁面上呈現很多東西的時候，我們就會覺得固定在頂部的導航條是多余的。
這時，可以通過使用headroom.js，使網頁在向下方滾動的時候，頂部的導航條會自動收起來（隱藏）；網頁在向上方滾動的時候，頂部的導航條再自動出現（顯示）。這樣就能給我們的頁面更多的空間，視野更加開闊。相應效果請滑動本頁觀察本站導航欄的變化！
headroom.js的工作原理是：通過感應目標元素不同的3種狀態（原始，下滾，上滾），為目標元素更改相應的class，通過相應的class的css樣式的變化得到所要的效果。
下面就介紹實現方法：
第壹種方式（推薦）
首先，在footer中加載下面的js：
<scripttype="text/javascript"src="/headroom.js@0.9.3/dist/headroom.min.js"></script><script>(function(){newHeadroom(document.querySelector("#nav-scroll"),{//這裏的nav-scroll改為妳的導航欄的id或classoffset:5,//在元素沒有固定之前，垂直方向的偏移量（以px為單位）tolerance:5,//scrolltoleranceinpxbeforestatechangesclasses:{initial:"animated",//當元素初始化後所設置的classpinned:"slideUp",//向上滾動時設置的classunpinned:"slideDown"//向下滾動時所設置的class}}).init();}());</script>然後，加上樣式就over了：
.animated{position:fixed;top:0;left:0;right:0;transition:all.2sease-in-out;}.animated.slideDown{top:-100px;}.animated.slideUp{top:0;}其中的class要與上面js中的相對應！
第二種方式：
首先，依次引入下面4個js，註意順序別錯了，嚴格遵守！
<scriptsrc="/jquery/1.10.2/jquery.min.js"></script><scripttype="text/javascript"src="/headroom.js"></script><scripttype="text/javascript"src="/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script><scripttype="text/javascript">$(".navbar-fixed-top").headroom();</script>其中，第壹個jquery壹般wordpress主題都帶有了就可以不必再加載了；.navbar-fixed-top為導航欄的class（也可以是id）。
然後，在引入css就ok了：
.headroom{position:fixed;top:0;left:0;right:0;transition:all.2sease-in-out;}.headroom--unpinned{top:-100px;}.headroom--pinned{top:0;}下面再給個具體的例子，用editplus或其它編輯器保存為html網頁，雙擊即可看效果。修改自@大學IT網
<!DOCTYPEhtml><html><head><title>Bootstrap101Template</title><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--Bootstrap--><linkrel="stylesheet"href="/twitter-bootstrap/3.0.3/css/bootstrap.min.css"><linkrel="stylesheet"href="I:/webpage/animate/animate.css"><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries--><!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://--><!--[ifltIE9]><scriptsrc="/html5shiv/3.7.0/html5shiv.min.js"></script><scriptsrc="/respond.js/1.3.0/respond.min.js"></script><![endif]--><styletype="text/css">.headroom{position:fixed;top:0;left:0;right:0;transition:all.2sease-in-out;}.headroom--unpinned{top:-100px;}.headroom--pinned{top:0;}</style><styletype="text/css">.scrollspy-example{height:1200px;overflow:auto;position:relative;}</style></head><body><!--頁眉大屏顯示--><divclass="jumbotron"><divclass="container"><h1>Hello,world!</h1><p>Thisisatemplateforasimplemarketingorinformationalwebsite.Itincludesalargecalloutcalledajumbotronandthreesupportingpiecesofcontent.Useitasastartingpointtocreatesomethingmoreunique.</p><p><aclass="btnbtn-primarybtn-lg"role="button">Learnmore</a></p></div></div><divclass="container"><!--導航欄--><navclass="navbarnavbar-inversenavbar-fixed-top"role="navigation"id="example"><divclass="navbar-header"><aclass="navbar-brand"href="#">w3school</a></div><divclass="collapsenavbar-collapse"id="tem"><ulclass="navnavbar-nav"><liclass="active"><ahref="#php">PHP</a></li><li><ahref="#js">JS</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">database<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#mysql">MySQL</a></li><li><ahref="#pgsql">PostgreSQL</a></li><li><ahref="#mgdb">MogoDB</a></li></ul></li></ul></div></nav><!--主體內容--><divdata-spy="scroll"data-target="#example"data-offset="0"class="scrollspy-example"><h4id="php">PHP</h4><p>PHP,anacronymforHypertextPreprocessor,isawidely-usedopensourcegeneral-purposescriptinglanguage.?ItisanHTMLembeddedscriptinglanguageandisespeciallysuitedforwebdevelopment.ThebasicsyntaxofPHPissimilartoC,Java,andPerl,andiseasytolearn.PHPisusedforcreatinginteractiveanddynamicwebpagesquickly,butyoucandomuchmorewithPHP.</p><h4id="js">JS</h4><p>JavaScriptisacross-platform,object-orientedscriptinglanguagedevelopedbyNetscape.JavaScriptwascreatedbyNetscapeprogrammerBrendanEich.ItwasfirstreleasedunderthenameofLiveScriptaspartofNetscapeNavigator2.0inSeptember1995.ItwasrenamedJavaScriptonDecember4,1995.AsJavaScriptworksontheclientside,Itismostlyusedforclient-sidewebdevelopment.</p><h4id="mysql">MySQL</h4><p>MySQLtutorialofw3cschoolisacomprhensivetutorialtolearnMySQL.Wehavehundredsofexamplescovered,oftenwithPHPcode.ThishelpsyoutolearnhowtocreatePHP-MySQLbasedwebapplications.</p><h4id="pgsql">PostgreSQL</h4><p>In1986theDefenseAdvancedResearchProjectsAgency(DARPA),theArmyResearchOffice(ARO),theNationalScienceFoundation(NSF),andESL,IncsponsoredBerkeleyPOSTGRESProjectwhichwasledbyMichaelStonebrakessr.In1987thefirstdemoversionoftheprojectisreleased.InJune1989,Version1wasreleasedtosomeexternalusers.Vesion2and3werereleasedin1990and1991.Version3hadsupportformultiplestoragemanagers,anqueryexecutorwasimproved,rulesystemwasrewritten.Afterthat,POSTGREShasbeenstartedtobeimplementedinvariousresearchanddevelopmentprojects.Forexample,inlate1992,POSTGRESbecametheprimarydatamanagerfortheSequoia2000scientificcomputingproject4.Usercommunityaroundtheprojectalsohasbeenstartedincreasing;by1993,itwasdoubled.</p><h4id="mgdb">MongoDB</h4><p>ThetermNoSQLwascoinedbyCarloStrozziintheyear1998.HeusedthistermtonamehisOpenSource,LightWeight,DataBasewhichdidnothaveanSQLinterface.Intheearly2009,whenlast.fmwantedtoorganizeaneventonopen-sourcedistributeddatabases,EricEvans,aRackspaceemployee,reusedthetermtoreferdatabaseswhicharenon-relational,distributed,anddoesnotconformtoatomicity,consistency,isolation,durability-fourobviousfeaturesoftraditionalrelationaldatabasesystems.</p><p>AfterreadingthelargestthirdpartyonlineMySQLtutorialbyw3cschool,youwillbeabletoinstall,manageanddevelopPHP-MySQLwebapplicationsbyyourown.Wehaveacomprehensive,SQLTUTORIAL,whichwillhelpyoutounderstandhowtopreparequeriestofetchdataagainstvariousconditions.</p></div></div><!--jQuery(necessaryforBootstrap'sJavaScriptplugins)--><scriptsrc="/jquery/1.10.2/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script><scripttype="text/javascript"src="/headroom.js"></script><scripttype="text/javascript"src="/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script><scripttype="text/javascript">$(".navbar-fixed-top").headroom();</script></body></html>
如果上面引用的headroom.js 已經失效，建議搜索：JavaScript 庫