导航栏顶部悬停的两种方法

最新推荐文章于 2023-12-12 08:39:53 发布

tianxiangd

最新推荐文章于 2023-12-12 08:39:53 发布

阅读量5.1k

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/tianxiangd/article/details/54617081

版权

一，引用jquery实现。

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.1.7.2.min.js")">
    </script>
    <script type="text/javascript">
        $(function () {
            if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
                var handler, sTop, dTop;
                dTop = $("#nav").offset().top
                $(window).bind('scroll', function () {
                    window.clearTimeout(handler);
                    handler = window.setTimeout(function () {
                        sTop = $(document).scrollTop();
                        sTop > dTop ? $("#nav").css("top", sTop - dTop) : $("#nav").css("top", 0);
                        $("#nav").css({ "position": "relative", "z-index": "1200" });
                    }, 60);
                });
            } else {

                var topMain = $("#nav").offset().top
                $(window).scroll(function () {
                    if ($(window).scrollTop() > topMain) {
                        $("#nav").addClass("nav_scroll");
                    } else {
                        $("#nav").removeClass("nav_scroll");
                    }
                });

            }
        });

    </script>

二，纯js实现。

<script type="text/javascript">
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.οnscrοll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed"; //针对悬浮至顶部后，做相应的样式更改       
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>
</script>