用html和css实现导航栏粘滞效果

空木幻城

已于 2023-09-25 19:30:31 修改

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： html css

于 2021-07-21 19:23:14 首次发布

本文链接：https://blog.csdn.net/qq_44938644/article/details/118973916

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用html和css实现导航栏粘滞效果

代码地址

https://gitee.com/kimu/front-style/tree/master/%E5%AF%BC%E8%88%AA%E6%A0%8F%E7%B2%98%E6%BB%9E%E6%95%88%E6%9E%9C

情景分析

在制作网站的过程中，会遇上这样一种情况，我们希望某个导航栏或者是一个长条在下滑的过程中向上移动，但是到了顶部的时候就固定不动的效果
对于这种情况，很多人会想到用javascript来控制，通过计算导航栏与页面最上方的距离来实现粘滞效果，但是实际上仅仅通过css就可以实现

css部分

/* 主要样式，最关键的是position设置为sticky并且top设置成0px */
.sticky {
    position: sticky;
    top: 0px;
    height: 40px;
    width: 100%;
    background-color: lightskyblue;
}

/* 留出一定空白用的样式，方便测试 */
.blank {
    height: 1400px;
}

html部分

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--引入css样式-->
    <link rel="stylesheet" type="text/css" href="./css/sticky.css" />
</head>

<body>
    <!--空白部分，为导航栏留出一个上边距-->
    <div class="blank"></div>
    <nav class="sticky">

    </nav>
    <!--空白部分，留出一定的下边距，使得导航栏可以继续向上移动-->
    <div class="blank"></div>
</body>
</html>