HTML案例：滚动条下拉后导航栏有网格状效果

长风沛雨 • 2023年07月09日 20:44 • 2年前 • 编程日记 • 阅读(2) • 违法举报

案例：在滚动条下拉的时候，导航栏是固定的，当下拉卷出的内容在导航条的范围内时，导航条的背景虚化为卷出的内容

固定定位的效果

需求效果：

1、HTML代码

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    nav {
      /* 固定定位 */
      position: fixed;
      width: 100%;
      height: 60px;
    }

    nav h3 {
      text-align: center;
      line-height: 60px;
    }

    .box {
      padding-top: 60px;
      width: 100%;
      height: 800px;
    }
  </style>
</head>

<body>
  <nav>
    <h3>导航栏</h3>
  </nav>
  <div class="box">
    <img
      src="https://note.mafengwo.net/img/e1/fb/3d3ff2df501ac0f77724e0a954b9f441.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90"
      alt="">
  </div>

</body>

2、给导航条添加样式

    nav {
      /* 固定定位 */
      position: fixed;
      width: 100%;
      height: 60px;
      /* 给导航条添加以下效果 */
      /* 1、径向渐变 */
      background-image: radial-gradient(transparent 2px, #ffffff 2px);
      /* 2、背景缩放 */
      background-size: 4px 4px;
      /* 3、元素后面的区域添加：饱和度 和 模糊效果 */
      backdrop-filter: saturate(50%) blur(2px);
    }

文章来源地址https://uudwc.com/A/v0b8a

原文地址:https://blog.csdn.net/qq_63141957/article/details/131625613

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！