jQuery滚动顶部定位导航

最新推荐文章于 2022-11-06 08:13:21 发布
转载最新推荐文章于 2022-11-06 08:13:21 发布 · 946 阅读
文章标签：
本文介绍了一个使用jQuery实现的滚动顶部定位导航栏效果。该导航栏包含多个层级菜单，并且随着页面滚动而固定显示在顶部。文章通过具体的HTML结构和CSS样式展示了如何创建这样一个实用的导航组件。

<!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" />
<title>jQuery滚动顶部定位导航</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<style type="text/css">
body, div, ul, li{margin:0;padding:0;}
body{font-family:"微软雅黑", Arial, Helvetica, sans-serif;color:#333333;line-height:25px;font-size:14px;}
a:link, a:visited{text-decoration:none;color:#333333;}
a:hover{text-decoration:underline;color:#08A5E0;text-decoration:none;}
ul, ul li{list-style-type:none;}
.cl{zoom:1;}
/*网站头部*/
.col960{width:960px;margin:auto;}
.navbg{height:40px;width:100%;background:#08A5E0;box-shadow:1px 1px 7px #999;position:absolute;z-index:99;left:0;}
#navul li{float:left;margin-right:1px;width:100px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li.navhome{text-align:left;padding:0 0px 0 40px;width:60px;}
#navul li a:link, #navul li a:visited{color:#FFFFFF;}
#navul li ul{display:none;position:absolute;z-index:10000;top:38px;left:-1px;background:#006D96;border:#004E6C 1px solid;border-bottom:none;}
#navul li ul li{display:block;width:98px;float:none;margin-right:0px;height:28px;position:relative;line-height:28px;border-bottom:#004E6C 1px solid;font-size:12px;}
#navul li.navmoon{background:#006D96;border:#004E6C 1px solid;width:98px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#FFFFFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:98px;height:28px;line-height:28px;}
#navul li.navmoon ul a:hover{background:#000000;}
</style>

</head>
<body style="height:1800px;">

    <br />
    <br />
    <br />
    <br />
    <br />

    <div class="navbg">
        <div class="col960">
            <ul id="navul" class="cl">
                <li class="navhome"><a href="#">HOME</a></li>
                <li>
                    <a href="#">Html</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">CSS</a>
                    <ul>
                        <li><a href="#">CSS入门</a></li>
                        <li><a href="#">CSS工具</a></li>
                        <li><a href="#">CSS技巧</a></li>
                        <li><a href="#">CSS实例</a></li>
                        <li><a href="#">CSS3</a></li>
                        <li><a href="#">CSS hack</a></li>
                        <li><a href="#">CSS2.0 手册</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">网页特效</a>
                    <ul>
                        <li><a href="#">导航菜单</a></li>
                        <li><a href="#">表单按钮</a></li>
                        <li><a href="#">表格图层</a></li>
                        <li><a href="#">图片特效</a></li>
                        <li><a href="#">滚动特效</a></li>
                        <li><a href="#">文字特效</a></li>
                        <li><a href="#">时间日期</a></li>
                        <li><a href="#">窗口特效</a></li>
                        <li><a href="#">鼠标特效</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">前端资讯</a>
                    <ul>
                        <li><a href="#">用户体验</a></li>
                        <li><a href="#">前端观察</a></li>
                        <li><a href="#">职业生涯</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">前端技巧</a>
                    <ul>
                        <li><a href="#">布局技巧</a></li>
                        <li><a href="#">网页字体</a></li>
                        <li><a href="#">flash</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">杂七杂八</a>
                    <ul>
                        <li><a href="#">帝国cms</a></li>
                        <li><a href="#">电脑技巧</a></li>
                        <li><a href="#">随笔杂谈</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Javascript</a>
                    <ul>
                        <li><a href="#">Jquery</a></li>
                        <li><a href="#">Js学习</a></li>
                        <li><a href="#">Js教程</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">网站优化</a>
                    <ul>
                        <li><a href="#">SEO杂谈</a></li>
                        <li><a href="#">站长工具</a></li>
                        <li><a href="#">经验分享</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

<script  type="text/javascript"> 
$(document).ready(function(){

    $(".navbg").capacityFixed();

    $("#navul > li").not(".navhome").hover(function(){
        $(this).addClass("navmoon");
    },function(){
        $(this).removeClass("navmoon");
    });

});


(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
        var FixedFun = function(element) {
            var top = opts.top;
            element.css({
                "top":top
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0                          
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
        right : 0,
        top:95
    };
})(jQuery);

</script>


</body>
</html>