代码块
/* CSS */
*{
margin: 0;
padding: 0;
}
body{
font-size: 15px;
font-family:"Microsoft yahei";
}
.head{
width: 100%;
height: 180px;
background: #f00;
}
.top{
width: 100%;
background: #000;
height: 60px;
position: absolute;
}
.place{
width: 100%;
height: 400px;
}
.bjg{
background-color: #B73150;
}
.bjr{
background-color: #C85151;
}
.pf{
position: fixed;
top: 0;
left: 0;
}
<div class="head"></div>
<div class="top">导航</div>
<div class="place bjg"></div>
<div class="place bjr"></div>
<div class="place bjg"></div>
<div class="place bjr"></div>
<SCRIPT>
var oHead = getClassname("head")[0];
var oHig = oHead.offsetHeight;
window.onscroll = function(){
var oTop = getClassname("top")[0];
var scroll = getScrollTop();
if(scroll > oHig){
addClass(oTop,"pf");
}else{
removeClass(oTop,"pf");
}
}
// 获取滚动条距离顶部距离
function getScrollTop(){
return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
}
// 获取含有classname的节点
function getClassname(classnames){
var oDiv;
var oBj = [];
if(document.getElementsByClassName){
oBj = document.getElementsByClassName(classnames);
}else{
oDiv = document.getElementsByTagName("*");
var oLen = oDiv.length;
var oClass;
for (var i = 0; i < oLen; i++) {
oClass = oDiv[i].className;
if(oClass.indexOf(classnames) != -1){
oBj[oBj.length] = oDiv[i];
}
}
}
return oBj;
}
//判断某个节点是否含有class
function hasClass(elements,cName){ //http://www.jb51.net/article/35490.htm
return !!elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
}
// 添加class
function addClass(elements,cName){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
}
// 移除class
function removeClass(elements,cName){
if( hasClass( elements,cName ) ){
// replace方法是替换
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
}
}
</SCRIPT>
效果:滚动条滚动超过头部高度,导航会悬浮在头部