div+css制作冻结效果-悬浮导航
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;}