1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>顶部固定菜单</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 .nav-wrapper-fixed{ position:fixed; top:0; width:100%;} 9 .nav-wrapper-fixed .nav{width:960px; margin:0 auto;} 10 .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} 11 .nav-wrapper{ margin-top:100px; width:100%;} 12 .nav-wrapper .nav{width:960px; margin:0 auto;} 13 .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} 14 </style> 15 <script type="text/javascript"> 16 window.onload=function(){ 17 var nav=document.getElementById('nav'); 18 var navFixed=document.getElementById('navFixed'); 19 window.onscroll=function(){ 20 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 21 document.title=scrollTop 22 if(scrollTop>nav.offsetTop){ 23 navFixed.style.display='block'; 24 }else if(scrollTop<nav.offsetTop){ 25 navFixed.style.display='none'; 26 } 27 } 28 }; 29 </script> 30 </head> 31 <body style="height:2000px;"> 32 <div class="nav-wrapper"> 33 <div class="nav" id="nav"> 34 <ul> 35 <li>菜单一</li> 36 <li>菜单二</li> 37 <li>菜单三</li> 38 <li>菜单四</li> 39 <li>菜单五</li> 40 </ul> 41 </div> 42 </div> 43 <div class="nav-wrapper-fixed" id="navFixed" style="display:none;"> 44 <div class="nav" id="nav"> 45 <ul> 46 <li>菜单一</li> 47 <li>菜单二</li> 48 <li>菜单三</li> 49 <li>菜单四</li> 50 <li>菜单五</li> 51 </ul> 52 </div> 53 </div> 54 </body> 55 </html>
自动悬浮于顶部的固定菜单 --- 可以实现新浪微博顶部导航菜单一样的效果
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 汉堡菜单按钮
用 css 实现汉堡菜单图标与关闭图标过渡动画交互效果。
css 汉堡图标 动画 ux 交互体验 -
看懂OSSIM的WebUI菜单源码文件
本文详细介绍OSSIM前端WebUI菜单结构和代码注释
数组 OSSIM 汉化 -
回到顶部
回到顶部 - 豪情 运行代码
html xml javascript 3c css -
js回到顶部
回到顶部<!DOCTYPE html><html lan="en"><head
javascript css3 css html -
jq 回到顶部
jq 回到顶部jquery回到顶部的方法:核心代码:$("html,body").animate({ scrollTop: 0 }, 500
jq 回到顶部 jquery 回到顶部 html jquery 点击事件 -
导航栏滚动到顶部后固定
导航栏滚动到顶部后固定
css javascript jquery 导航栏 .net -
iOS tableView 回到顶 iphone怎么回到顶部
这是scrollView的一个属性,返回值是bool类型,默认是yes,即默认情况下点击状态条就可以回到顶部.
iOS scrollViewToTop 自定义 属性设置