页面滚动则固定导航

发布时间:2021-07-08作者:小灵龙点击:154

导航栏距离顶部有一定的距离,滚动之后接近浏览器顶部,在滚动之后不在变化,跟随浏览器窗口滚动。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>滚动</title>
    <style>
        body{position: relative;}
        .se{position: fixed; top: 0;z-index: 999;background-color: #eee;width: 100%;rignt:0}
    </style>
    <script>
    var i=0;
    $(window).scroll(function(){
        i=$(window).scrollTop();
              var gd = $("#daoHangLan").outerHeight();//导航高度
        if(i>=gd){
            $(".x_box").addClass("se")
        }else{
            $(".x_box").removeClass("se")
        }
    })
    </script>
</head>
<body> 
    <div class="x_box" >
      <ul>
        <li>首页</li>
      </ul>
     </div>  

</body>
</html>

标签: