jQuery小案例之固定导航栏

Ron韦斯莱

于 2019-04-04 19:44:36 发布

阅读量864

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43537987/article/details/89034175

本文介绍了使用jQuery创建一个固定导航栏的小案例。通过分析滚动条位置，当页面滚动超出导航栏上方元素总高度时，将导航栏设置为fixed定位，否则恢复为static。在实现过程中需要注意fixed定位可能引起下方元素上移的问题，以及利用window对象的scroll事件和scrollTop()方法来获取和处理滚动距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果：
在这里插入图片描述
代码部分：
html
为展示效果方便，用三张图片代替，愿谅解。

<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>

css:

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>

jQuery:

<script src="jquery-1.12.2.js"></script>
    <script>
       $(function(){
          //window对象触发滚动事件
          $(window).scroll(function(){
              
             if($(document).scrollTo