首页 > 学习笔记 > JavaScript > 正文

Jquery实现的顶部导航菜单一直都在页面最顶上

发布时间:2016-05-05 15:54:47 点击量:

  非常漂亮的一个jquery功能代码,很多网页都可以看到,把顶部导航栏一直固定的页面的最上方,无论我们的页面有多么长,随便你怎么向下滚动下拉条,但是顶部的导航菜单一定是会显示在页面的最上方,就是任何时候你都能看到导航条,当然你可以换成其他的

<!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>顶部栏目固定 www.xcyxcy.com</title>
    <script src="http://www.xcyxcy.com/statics/js/xcy/jquery-1.10.2.min.js"language="javascript" type="text/javascript"></script>
    <script>
    $(function(){
    $(window).scroll(function() {
    //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
    if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
    }else{
    $(".nav").removeClass("fixedNav");
    }
    });
    });
    </script>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    div.nav{
        background:#000000;
        height:57px;
        line-height:57px;
        color:#ffffff;
        text-align:center;
        font-family:"微软雅黑", "黑体";
        font-size:30px;
    }
    div.fixedNav{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        z-index:100000;
        _position:absolute;
        _top:expression(eval(document.documentElement.scrollTop));
    }
    </style>
    </head>
    <body>
    <div class="header" style="background:#CCCC00;height:250px;"></div>
    <div class="nav">
    <p>导航固定 测试代码 www.xcyxcy.com</p>
    </div>
    <div class="content" style="background:#0099FF; height:2000px;"></div>
    </body>
    </html>

上一篇:初识JavaScript

下一篇:几种常见的返回页面顶部代码