悬浮菜单固定在网页顶部的JS代码 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

分享一段悬浮菜单固定在网页顶部的JS代码:

<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>
" /> 悬浮菜单固定在网页顶部的JS代码 · 任刚 · Ren Gang - 我的设计笔记

悬浮菜单固定在网页顶部的JS代码

, ,
15/06/2014    任刚    小贴士

悬浮菜单固定在网页顶部的JS代码 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

分享一段悬浮菜单固定在网页顶部的JS代码:

<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>

「真诚赞赏,手留余香」

任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

任刚(rengang.com.cn)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!


发表回复

登 录 注 册