用了增强用户体验，冻结效果被广为应用，如网站导航，推送广告等等．
导航冻结效果
1、常规的导航html代码 <div class="top">我是top，我在导航上面</div> <div class="nav"> <ul> <li><a>首页</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> </ul> </div> <div class="cont"> 我是main我在导航下面 </div>css代码.top{height:40px;background:#fff;}.nav{width:1200px;height:40px;background:#147DDF;}ul li{float:left;padding:0 10px;}ul li a{color:#fff;line-height:40px;text-decoration:none;}按照上面的常规的写法，如果页面出现滚动条，我们滚动面页，导航就会被遮住，无法看见．
2、悬浮导航<div class="top">我是top，我在导航上面</div> <div class="nav"> <ul> <li><a>首页</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> </ul> </div> <div class="cont"> 我是main我在导航下面 </div>css代码.top{height:40px;background:#fff;}.nav{position:fixed;top:0;z-index:9999;width:1200px;height:40px;background:#147DDF;} ul li{float:left;padding:0 10px;} ul li a{color:#fff;line-height:40px;text-decoration:none;}
3、js实现切换悬浮虽然我尺攵跋赈们实现了导航悬浮效果，但我们给导航添加了position:fixed的css样式之后,不管滚动条滚动的高度是否超过导航的高度，导航都是悬浮的，当滚动条在顶部时，导航讵畿缤耒会把top遮住．按逻辑来说，当滚动条滚动的高度超过了top的高度，导航才有悬浮效果．如此，我们就要使用js来获取滚动的高度，来切换悬浮效果 window.onload = function(){ var nav = document.getElementById('nav'); window.onscroll = function(){ var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop//w3c，各ie的兼容 if(top >=40){ addClass(nav,'nav-fixed'); }else{ removeClass(nav,'nav-fixed'); } } } function addClass(ele,classname){ var oldClass = ele.className; var pattern = new RegExp('(^|\\s)'+classname+'(\\s|$)'); if(!pattern.test(oldClass)){ ele.className +=' '+classname; } } function removeClass(ele,classname){ var oldClass = ele.className; var pattern = new RegExp('(^|\\s)'+classname+'(\\s|$)'); if(pattern.test(oldClass)){ ele.className = ele.className.replace(pattern,' '); } }我们重新编辑导航的css样式.nav{width:1200px;height:40px;background:#147DDF;}.nav-fixed{position:fixed;top:0;z-index:9999;}
4、使用此效果出错抖动，滚动条无法下拉当你使用此效果装饰网页时，出现滚动条无法下拉的情况，是因为悬浮元素加入position:fixed样式之后，已经脱离布局，页面的高度不会把悬浮元素的高度计算在内．比如当前例子，浏览器的可视区域的高度为644px,内容未超过644px，浏览器将不会出现滚动条．我们将top的高度设置为44px，main的高度设置为600px ，加上导航高度，页面高度超过644px,出现滚动条，当滚动条滚动的高度超过44px时，导航脱离布局,导航悬浮，页面高度为644px，页面高度为644px，不应该出现滚动条，滚动条滚动的高度变为0,悬浮元素回归布局，页面高度又大于644px了，因为出现滚动条无法下拉的现象．解决方法：我们只需给悬浮元素外包一层div,并将这个div的高度设置为悬浮元素的高度html代码： <div class="head"> <div class="top">我是top，我在导航上面</div> <div class="nav" id="nav"> <ul> <li><a>首页</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> </ul> </div>css代码 .head .top{height:44px;background:#fff;} .head .nav{width:1200px;height:80px;background:#147DDF;}
