jQuery学习 (固定导航栏效果)

Posted gaosj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习 (固定导航栏效果)相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
        /*.top {
            height: 171px;
        }
        .nav {
            height: 86px;
        }*/
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                //获取页面卷曲出去的高度和.top的div的高度对比
                if($(document).scrollTop()>$(".top").height()){
                    $(".nav").css({"position":"fixed","top":0});
                    $(".main").css("marginTop",$(".nav").height());
                }else{
                    $(".nav").css("position","static");
                    $(".main").css("marginTop",0);
                }
            });
        });

    </script>
</head>

<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />
</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>

</html>

 

以上是关于jQuery学习 (固定导航栏效果)的主要内容，如果未能解决你的问题，请参考以下文章

jquery实现简易大气3D导航下拉菜单菜单栏效果

12个用得着的 JQuery 代码片段

双向滚动时隐藏固定菜单

常用的几个JQuery代码片段

BootStrap有用代码片段（持续总结）

jQuery：在页面滚动时更改固定顶部导航栏的文本颜色