自动悬浮于顶部的网页导航菜单,当你拖动滚动条的时候,菜单会自动固定悬浮于顶部。就像一些自动适应的QQ客服布局一样,不管滚动条如何滚动,它始终显示在默认的地方。
总结:导航的css的关键:position:relative;
window.onload = function () {
var mydiv = document.getElementById("main");
var mt = mydiv.offsetTop;
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t > mt) {
//mydiv.style.position = "fixed"
//mydiv.style.margin = "0";
//mydiv.style.top = "0";
mydiv.style.cssText="width:100%; position:fixed; margin:0;top:1px;background:#eee; color:#fff; font-size:1.6rem;";
}
else {
mydiv.style.position = "static";
mydiv.style.height="6rem";
mydiv.style.background='';
}
}
}