您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > JavaScript教程 > 文章正文
悬浮菜单固定在网页顶部的JS代码
更新时间:2015/1/6 0:21:45   点击:3458次

<script>

// 定义菜单栏离页面顶部的距离,默认为200

var divOffsetTop = 200;

//滚动事件

window.onscroll=function(){

var div = document.getElementById("topmenu");

// 计算页面滚动了多少(需要区分不同浏览器)

var topVal = 0; 

if(window.pageYOffset){

//这一条滤去了大部分, 只留了IE678

topVal = window.pageYOffset;

}

 else if(document.documentElement.scrollTop ){

 //IE678 的非quirk模式

 topVal = document.documentElement.scrollTop;

else if(document.body.scrolltop){

//IE678 的quirk模式

topVal = document.body.scrolltop;

}

if(topVal <= divOffsetTop){

div.style.position = "";

}

else {

 div.style.position = "fixed";

 }

 };

 // 页面加载完之后,计算菜单栏到页面顶部的实际距离

 window.onload=function(){

 var div = document.getElementById("topmenu");

 divOffsetTop = div.offsetTop;

 };

 </script> 

相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2