页面滚动时固定菜单栏

guomingzhang2008
浏览: 157434 次
性别:
来自: 上海
最近访客更多访客>>

旺仔小呆
lifan51777
qq849397558
zo1698
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
JavaScript
页面滚动固定菜单
往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
        <script>  
        // 定义菜单栏离页面顶部的距离，默认为200  
        var divOffsetTop = 200;  
        //滚动事件  
        window.onscroll=function(){  
            var div = document.getElementById("divId");  
            // 计算页面滚动了多少（需要区分不同浏览器）  
            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("divId");  
            divOffsetTop = div.offsetTop;  
        };  
        </script>  
    </head>  
    <body>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        <div id="divId" style="width: 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
        aaaaaaaaaaaaaaaaaaaaaaa<br>  
    </body>  
</html>
分享到：