用了增强用户体验，冻结效果被广为应用，如网站导航，推送广告等等．
常规的导航html代码 divclass=top我是top，我在导航上面/div divclass=nav ul lia首页/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li /ul /div divclass=cont 我是main我在导航下面 /divcss代码.top{height:40px;background:#fff;}.nav{width:px;height:40px;background:#DDF;}ulli{float:left;padding:px;}ullia{color:#fff;line-height:40px;text-decoration:none;}按照上面的常规的写法，如果页面出现滚动条，我们滚动面页，导航就会被遮住，无法看见．
悬浮导航divclass=top我是top，我在导航上面/div divclass=nav ul lia首页/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li /ul /div divclass=cont 我是main我在导航下面 /divcss代码.top{height:40px;background:#fff;}.nav{position:fixed;top:0;z-index:;width:px;height:40px;background:#DDF;} ulli{float:left;padding:px;} ullia{color:#fff;line-height:40px;text-decoration:none;}
js实现切换悬浮虽然我们实现了导航悬浮效果，但我们给导航添加了position:fixed的css样式之后,不管滚动条滚动的高度是否超过导航的高度，导航都是悬浮的，当滚动条在顶部时，导航会把top遮住．按逻辑来说，当滚动条滚动的高度超过了top的高度，导航才有悬浮效果．如此，我们就要使用js来获取滚动的高度，来切换悬浮效果 window.onload=function(){ varnav=document.getElementById(nav); window.onscroll=function(){ vartop=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop//w3c，各ie的兼容 if(top=40){ addClass(nav,nav-fixed); }else{ removeClass(nav,nav-fixed); } } } functionaddClass(ele,classname){ varoldClass=ele.className; varpattern=newRegExp((^
\\s)+classname+(\\s
$)); if(!pattern.test(oldClass)){ ele.className+=+classname; } } functionremoveClass(ele,classname){ varoldClass=ele.className; varpattern=newRegExp((^
\\s)+classname+(\\s
$)); if(pattern.test(oldClass)){ ele.className=ele.className.replace(pattern,); } }我们重新编辑导航的css样式.nav{width:px;height:40px;background:#DDF;}.nav-fixed{position:fixed;top:0;z-index:;}
使用此效果出错抖动，滚动条无法下拉当你使用此效果装饰网页时，出现滚动条无法下拉的情况，是因为悬浮元素加入position:fixed样式之后，已经脱离布局，页面的高度不会把悬浮元素的高度计算在内．比如当前例子，浏览器的可视区域的高度为px,内容未超过px，浏览器将不会出现滚动条．我们将top的高度设置为44px，main的高度设置为px，加上导航高度，页面高度超过px,出现滚动条，当滚动条滚动的高度超过44px时，导航脱离布局,导航悬浮，页面高度为px，页面高度为px，不应该出现滚动条，滚动条滚动的高度变为0,悬浮元素回归布局，页面高度又大于px了，因为出现滚动条无法下拉的现象．解决方法：我们只需给悬浮元素外包一层div,并将这个div的高度设置为悬浮元素的高度html代码： divclass=head divclass=top我是top，我在导航上面/div divclass=navid=nav ul lia首页/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li liahref=#国内新闻/a/li /ul /divcss代码 .head.top{height:44px;background:#fff;} .head.nav{width:px;height:80px;background:#DDF;}
查看原文产品建议及投诉请联系：shoujibaidu
baidu.