首页>>前端开发
为了给浏览页面的用户提供更快捷、方便的导航,很多网站都提供了导航菜单栏随滚动条上下滚动的做法,以减少用户不必要的操作来提高网站用户粘度。并且很多的网站把导航条固定在网页的顶上,这样虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。
这个时候,我们就可以通过本文的方法(使用headroom.js),使我们的网页在向下方滚动的时候,顶部的导航条会自动收起来(隐藏);网页在向上方滚动的时候,顶部的导航条再自动出现(显示)。这样就能给我们的页面更多的空间,视野更加开阔。相应效果请滑动本页观察本站导航栏的变化!
headroom.js的工作原理是:通过感应目标元素不同的3种状态(原始,下滚,上滚),为目标元素更改相应的class,通过相应的class的css样式的变化得到所要的效果。
下面就介绍实现方法:
第一种方式(推荐)
首先,在footer中加载下面的js:
<scripttype="text/javascript"src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script> <script> (function(){ newHeadroom(document.querySelector("#nav-scroll"),{//这里的nav-scroll改为你的导航栏的id或class offset:5,//在元素没有固定之前,垂直方向的偏移量(以px为单位) tolerance:5,//scrolltoleranceinpxbeforestatechanges classes:{ initial:"animated",//当元素初始化后所设置的class pinned:"slideUp",//向上滚动时设置的class unpinned:"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="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <scripttype="text/javascript"src="https://npmcdn.com/headroom.js"></script> <scripttype="text/javascript"src=" https://rawgithub.com/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="http://cdn.bootcss.com/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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <scriptsrc="http://cdn.bootcss.com/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.I tincludesalargecalloutcalledajumbotronandthreesupportingpiecesofcontent. 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.ThebasicsyntaxofPHPissi milartoC,Java,andPerl,andiseasytolearn.PHPisusedforcreatinginteractiveandd ynamicwebpagesquickly,butyoucandomuchmorewithPHP. </p> <h4id="js">JS</h4> <p> JavaScriptisacross-platform,object-orientedscriptinglanguagedevelopedbyNetscape. JavaScriptwascreatedbyNetscapeprogrammerBrendanEich. ItwasfirstreleasedunderthenameofLiveScriptaspartofNetscapeNavigator2.0inSeptember1995.Itwasr enamedJavaScriptonDecember4,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.In1987 thefirstdemoversionoftheprojectisreleased.InJune1989,Version1wasreleasedtosomeexternalusers.Ve sion2and3werereleasedin1990and1991.Version3hadsupportformultiplestoragemanagers,anqueryexecutorwasi mproved,rulesystemwasrewritten.Afterthat,POSTGREShasbeenstartedtobeimplementedinvariousresearchanddevel opmentprojects.Forexample,inlate1992,POSTGRESbecametheprimarydatamanagerfortheSequoia2000scientificcompu tingproject4.Usercommunityaroundtheprojectalsohasbeenstartedincreasing;by1993,itwasdoubled. </p> <h4id="mgdb">MongoDB</h4> <p> ThetermNoSQLwascoinedbyCarloStrozziintheyear1998.HeusedthistermtonamehisOpenSource, LightWeight,DataBasewhichdidnothaveanSQLinterface.Intheearly2009,whenlast. fmwantedtoorganizeaneventonopen-sourcedistributeddatabases,EricEvans,aRackspaceemploy ee,reusedthetermtoreferdatabaseswhicharenon-relational,distributed,anddoesnotc onformtoatomicity,consistency,isolation,durability-fourobviousfeaturesoftraditionalrelationaldatabasesystems. </p> <p> AfterreadingthelargestthirdpartyonlineMySQLtutorialbyw3cschool,youwillbeabletoinstall, manageanddevelopPHP-MySQLwebapplicationsbyyourown.Wehaveacomprehensive,SQLTU TORIAL,whichwillhelpyoutounderstandhowtopreparequeriestofetchdataagainstvariousconditions. </p> </div> </div> <!--jQuery(necessaryforBootstrap'sJavaScriptplugins)--> <scriptsrc="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--> <scriptsrc="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <scripttype="text/javascript"src="https://npmcdn.com/headroom.js"></script> <scripttype="text/javascript"src=" https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script> <scripttype="text/javascript"> $(".navbar-fixed-top").headroom(); </script> </body> </html>
github 中的源代码
headroom.js 官网
headroom.js 中文官网
简书 headroom.js
WickyNilliams headroom.js
猜你喜欢
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 SEO尴尬,有排名,没流量,没咨询,怎么办?
- 搜索
-
- 2024-03-14 刷量成风,广告主损失惨重?该被重视了!
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2024-02-23 提高小红书运营效率的6个工具
- 2024-02-23 千川投放百宝书:2万字详解,一篇全掌握!
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2024-01-31 不行就去做销售吧!
- 2024-01-09 合格的优化师,需具备这6项思维能力!
- 2023-12-28 25个金句文案句式,直接套!
- 2023-12-05 做私域必备的10个朋友圈黄金模板
- 2023-12-05 15个爆款短视频文案技巧,看完立马用!
- 2023-11-27 浅析:《百度搜索优质内容解读》,当下百度···
- 2023-11-21 10年老兵看搜索广告的过去、现在和未来
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2020-09-03 element.style样式的修改
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2020-07-20 a标签使用rel=noopener有什么···
- 2020-06-12 全标题搜索不到,网站降权怎么快速恢复?
- 2021-02-24 卢松松:SEO行业到底有没有前途?
- 2020-12-01 所有SEO执行人员都应考虑这几点
- 2021-11-10 SEO运营,每天发多少文章,有益于SEO···
- 2019-02-22 百度搜索结果中,网站标题变成公司名了怎么···
- 2021-10-09 为什么网站排名下降,别着急,等一等,可能···
- 2021-05-19 宝塔面板一键数据迁移教程
- 2019-10-14 做seo处理死链接的详细方案
- 2020-06-10 新站优化必备操作,你都会了吗?
- 2020-01-13 聘请SEO外包商或seo顾问时,应避免的···
- 热门标签
-
- Error 1016
- Origin DNS error
- 源DNS服务器错误
- element.style
- css
- .db文件
- 域名解析
- 别名解析
- CNME解析
- A记录
- 宝塔
- asp.net
- php
- jsp
- 开发语言对比
- 白名单
- 香港主机
- 主机白名单
- 301
- 301重定向
- 301永久重定向
- 个人备案
- 企业备案
- 网站备案
- 500错误
- 锚点跳转
- 字体大小
- 用户体验
- 虚拟主机
- 网站搭建
- 自适应网站
- web前端
- 移动端
- 响应式网站
- 网站被黑
- 后台入侵
- 源码安全
- 备案驳回
- 阿里云备案
- 阿里云服务器
- 实例类型
- ftp
- flashfxp
- js空链接
- 织梦cms
- 开源CMS
- 百度转码
- 禁止转码
- 伪元素选择器
- 伪类选择器
- CSS3
- 网站建设
- 低成本网站
- 域名备案
- win10连接远程服务器
- 谷歌插件
- Chrome
- 服务器流量
- 网站流量耗尽
- 蜘蛛
- 屏蔽蜘蛛
- 网站体验设计
- 老年用户
- 网站安全
- html标签
- seo标签
- X-Powered-By
- 服务器空间
- 网站空间选择
- 网站设计
- seo要点
- seo建站方案
- robots.txt
- 0收录
- 新域名收录
- 网站收录
- 独立ip主机
- seo服务器
- 网站标签
- 标签优化
- dede
- 分页样式代码
- pbootcms
- 权限设置
- javascript
- 编程语言
- 服务器稳定性
- 网站续费
- 营销型网站
- 定制网站
- filter
- 滤镜
- PbootCMS
- sqlite
- mysql
- 数据库
- SQL
- Sqlite
- css3