亿联网自助建站系统 开启企业建站营销新时代、免费建站平台倡导者  站长学院  高端定制请点这里
热线:13913253836
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程 > 悬停

javascript 仿淘宝网悬停在页面固定位置的菜单窗口

作者:eycms 日期:2016/2/16 18:02:37 人气:52

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w.org/1999/xhtml">

<head>

<title>仿淘宝网悬停在页面固定位置的菜单窗口</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

*{padding:0;margin:0;}

#diya{width:200px;height:100px;background:#F45;position:absolute;left:100px;top:50px;z-index:5;}

#bod{width:400px;height:400px;position:relative;overflow:auto;background:#03C;top:25px;}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="bod">

<div id="diya"></div>

<p style="height:2000px;"></p>

</div>

<script type="text/javascript">

function fixedTitle(con,con2){

var bod = document.getElementById(con);

var diya=document.getElementById(con2);

var Ntop=diya.offsetTop;

var tt=100;

var bid=Ntop-tt;

bod.onscroll=ss;

function ss(){

var jia=bod.scrollTop;

if(jia<=Ntop){

diya.style.top=Ntop+'px';

}else{

diya.style.top=jia+bid+'px';

}

}

}

fixedTitle("bod","diya")

</script>

</body>

</html></td>

 </tr>

</table>


回到顶部