JQuery实现仿腾讯的固定导航栏

1、描述

　　窗口滚动一定高度之后才让导航栏固定

2、要点

　　浏览器滚动的事件：$(window).scroll(functiuon(){

　　文档滚过的高度：　　　$(doucment).scrollTop();

　　　　　　　　　　　});

3、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .content{
                width:1001px;
                margin: 0 auto;
            }
            .f{
                position:fixed;
                top:0;
                left:0;
            }
        </style>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var topHeight=$(".top").height();
                console.log(topHeight);
                //窗口滚动事件
                $(window).scroll(function(){
                    if($(document).scrollTop()>=topHeight){
                        //css定位
                        $(".nav").addClass("f");
                        $(".content").css("margin-top",$(".nav").height());
                    }else {
                        $(".nav").removeClass("f");
                        $(".content").css("margin-top",0);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="top">
            <img src="img/top.png" />
        </div>
        <div class="nav">
            <img src="img/nav.png"/>
        </div>
        <div class="content">
            <img src="img/main.png"/>
        </div>
    </body>
</html>
View Code

 

posted @ 2016-08-16 10:39  苏羽垄  阅读(343)  评论(0)  编辑  收藏  举报