18 jquery实现一个固定导航栏的案例

作者: An的杂货铺 | 来源:发表于2019-03-12 09:34 被阅读0次

<!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;
        }
    </style>
    
</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>
<script src="../jquery-1.12.1.min.js"></script>
<script>
   $(function(){
    $(window).scroll(function(){
        if($(document).scrollTop()>=$('.top').height()){
            $('.nav').css('position','fixed').css('top',0);
            $('.main').css('marginTop',$('.nav').height());//是为了不让该部分突然跳动
        }else{
            $('.nav').css('position','static');
            $('.main').css('marginTop','0');
        }
    })
   })
  
</script>
</html>