王志广的个人分享

浮动导航特效

admin发表于2013-01-09  3,693次浏览 标签: 

王志广的个人博客对浮动导航进行了研究,当滚动条到达导航的地方时,再往下导航一直在头部显示,兼容ie6,也可以通过jquery来实现,本人使用js来实现的,能够直接运行,可能拿来装饰网站,也可以拿来测试。

html代码
<divd=”nav_top”></div>
<div id=”nav”>
aaaaaaaaaa
</div>
js代码
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById(“nav”);
var search = document.getElementById(“nav_top”);
if( t >= 80 ) {
if(typeof document.body.style.maxHeight === “undefined”){
top_div.style.position = “absolute”;
top_div.style.top = t;
}else{
top_div.style.position = “fixed”;
top_div.style.top = “0”;
}
top_div.style.width = “980px”;
search.style.padding = “22px 0”;
}else{
top_div.style.position = “relative”;
search.style.padding = “5px 0”;
top_div.style.top = “0”;
}
}

你可以发表评论引用到你的网站或博客,或通过RSS 2.0订阅这个日志的所有评论。
上一篇:
下一篇:
已有2条评论
phperzone
2013 年 1 月 14 日

呵呵,哥来给你留言了,哥也会这个了

admin
2013 年 1 月 17 日

嗯,都学习学习

我来说两句

  Ctrl+Enter