シミュレーションosc推奨フローティングバー(demo)
1164 ワード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#a1 {
height: 150px;
width: 1000px;
background: #aaa;
}
#a2 {
height: 50px;
width: 1000px;
background:#ab9;
z-index:999;
top:0px;
}
#a3 {
height: 1720px;
width: 1000px;
background:#fb9;
}
</style>
<script type="text/javascript">
function flo(){
var p=document.body.scrollTop;
var i=document.getElementById("a2");
document.getElementById("a3").innerHTML=p;
if(p>=document.getElementById("a22").offsetTop){
i.style.position="fixed";
}else{
i.style.position="static";
}
}
setInterval(flo,1);
</script>
</head>
<body>
<div id="a1"> div</div>
<div id="a22"></div>
<div id="a2"> div</div>
<div id="a3" onMouseOver="flo();"> div </div>
</body>
</html>
本来absoluteで位置決めできるのですが、関数リフレッシュ周波数の問題で推奨バーが常にブレています.
もう一つの問題はjsがfixedのtop属性をどのように制御するかということです.相変わらずjqueryは使っていません...