web one item === 100vh-CSDN博客

本文链接：https://blog.csdn.net/u013633921/article/details/131284006

文章提供了一个在线体验链接，展示了一个使用HTML和CSS创建的具有固定标题（stickytitle）和滚动snapping效果的菜单。菜单项在滚动时会停在视口中心，为个人网站首页设计提供了灵感。读者可以查看示例代码并尝试应用到自己的网站上。

摘要由CSDN通过智能技术生成

1. Make a fun code

在线体验：https://codepen.io/zhu-hongwei/pen/ExOyKLx

2. Show me the code

<!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>
  </head>
  <body>
    <div class="menu-container">
      <div class="title">Title</div>
      <ul class="menu">
        <li class="menu-item">1</li>
        <li class="menu-item">2</li>
        <li class="menu-item">3</li>
        <li class="menu-item">4</li>
      </ul>
    </div>

    <style>
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      li:nth-of-type(odd) {
        background-color: #f5f6f7;
      }
      
     .title {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;

        height: 45px;
        line-height: 45px;

        /* color: #fff; */
        background-color: #000;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
      }

      .menu-container {
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        /* scroll-behavior: smooth */
      }

      .menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        
        height: 100vh;
        font-size: 50px;
        scroll-snap-align: center;
      }
    </style>
  </body>
</html>