jquery实现随着鼠标滚动固定导航栏

最新推荐文章于 2022-04-01 11:18:05 发布

yy211zhu

最新推荐文章于 2022-04-01 11:18:05 发布

阅读量5k

点赞数 1

分类专栏： Jquery 文章标签： jquery 导航

本文链接：https://blog.csdn.net/yy211zhu/article/details/51850821

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是简单的导航栏固定效果。。感觉代码很少，write less Do more.也算是jquery比较方便的原因。
下面代码仅供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面滚动事件</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
        $(document).ready(function(){
            //获取nav距离顶部的距离
             var navtop=$("#nav").offset().top;
             $(document).scroll(function(){
                 //获取滚动条滚动的高度
                 var scroltop=$(document).scrollTop();
                 if (scroltop > navtop){
                      $("#nav").css({
                          "position":"fixed",
                          "left":"0px",
                          "top":"0px",
                          "width":"100%"
                      })
                 }else {
                     $("#nav").css({
                         "position":"",
                         "left":"",
                         "top":"",
                         "width":""
                     })
                 }
             })
        })
    </script>
    <style type="text/css">
        *{margin: 0px; padding: 0px;}
         #nav{height:50px;
             background: #dddddd;}
        #f{
            height: 2000px; background:orange;
        }
    </style>
</head>
<body>
<div style="height:100px; background:yellow;"></div>
<div id="nav">
    <p>nav</p>
</div>
<div id="f">
<p>内容区</p>
</div>
</body>
</html>