CSS 实现菜单吸附效果

最新推荐文章于 2024-04-08 22:56:08 发布

shengjon

最新推荐文章于 2024-04-08 22:56:08 发布

阅读量610

点赞数

分类专栏： web 文章标签： css 前端 Scroll Snap

本文链接：https://blog.csdn.net/shengjon/article/details/125679818

版权

web 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

很多时候我们在做移动端的时候会有菜单吸附的需求，通常我们都是使用 css + js 来实现的，现在我们用纯 css 来实现一下。

CSS Scroll Snap （css滚动捕捉）

允许你在用户滚动后所动特定的元素或位置

外层：
scroll-snap-type
    x
    mandatory

单个元素：
scroll-snap-align
    start
    center
    end

demo 代码如下：

预览的时候切换到移动端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x;
      }
      .inner {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
      }
      .item {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100px;
        line-height: 50px;
        text-align: center;
        background-color: rgb(116, 226, 140);
        color: #fff;
        border-right: 2px solid rgb(155, 42, 42);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="inner">
        <li class="item">菜单一</li>
        <li class="item">菜单二</li>
        <li class="item">菜单三</li>
        <li class="item">菜单四</li>
        <li class="item">菜单五</li>
        <li class="item">菜单六</li>
        <li class="item">菜单七</li>
        <li class="item">菜单八</li>
        <li class="item">菜单九</li>
      </ul>
    </div>
  </body>
</html>

shengjon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现菜单吸附效果

很多时候我们在做移动端的时候会有菜单吸附的需求，通常我们都是使用 css + js 来实现的，现在我们用纯 css 来实现一下。允许你在用户滚动后所动特定的元素或位置demo 代码如下：预览的时候切换到移动端...
复制链接

扫一扫