制作导航栏浮动的代码,类似本站导航栏这种!

这段为js代码,他的大体思路就是坚持topi的尺寸,当大于40的时候给导航栏加入fixed的格式,实现浮动

<script>

window.onload = function(){

var navi=document.getElementById('main-navigation');

window.onscroll = function(){

var topi=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop//w3c,各ie的兼容

if(topi>=40){

addClass(navi,'main-nav');

}else{

removeClass(navi,'main-nav');

}

}

}

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,' ');

}

}

</script>


这段为浮动时的css代码:

.main-nav{

    position:fixed;top:0;z-index:999;

}

这段为未浮动时原本导航栏的css代码

#main-navigation{

    float: left;

    width: 100%;

    height: auto;

    margin-top: 0px;

}