JS实现悬浮导航制作

css部分，需要做一个导航栏。
创建style.css文件，并写入以下内容

body{
    margin: 0;
    padding: 0;
}

.nav{
    background-color:#521C1C;
    width: 100%;
    height: 38px
}
.nav#nav a{
    color: #ffffff;
    font-size: 14px;
    width: 160px;
    height: 38px;
    display: block;
    float:left;
    text-decoration: none;
    text-align: center;
    line-height: 38px;
}
.nav#nav a:hover{
    background:#e50065
}
.scrollNav{
    position: fixed;
    left: 0;
    top: 0
}

HTML部分
创建index.html文件，并写入以下内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>JS实现悬浮导航</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="javascript/nav.js"></script>
</head>

<body>
    <div id="nav" class="nav">
            <a href="#">导航标题</a>
            <a href="#">关于我们</a>
    </div>
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
</body>
</html>

JS部分
创建nav.js文件，并写入以下内容

$(document).ready(function () {
    var nav = $("#nav");
    //获取浏览器窗口
    $(window).scroll(function () {
        if ($(window).scrollTop() > 0) {
            nav.addClass("scrollNav")//添加样式
        } else {
            nav.removeClass("scrollNav")
        }
    });
});

基本思路是在js中判断导航栏是否在最顶端

如果不在，则加入{position: fixed;left: 0;top: 0}样式，
如果在，则删除{position: fixed;left: 0;top: 0}样式

预览效果