[问题探讨]position: sticky;实现banner吸顶功能

本文链接： https://blog.csdn.net/tom_wong666/article/details/87869685

需求：

实现banner吸顶功能，即nav，bannner，content上下三栏布局页面上，向上滚动过程中：
1，nav会消失逐渐；
2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；
3,content会向上走并逐渐被隐藏；

分析：

1，js+css实现：nav static定位， banner absolute定位(加top等于nav高度)， content static定位(加margin-top 等于banner高度)，依据body的scrollTop值动态调整banner absolute定位的top值；这样做，缺点是逻辑复杂，设备资源消耗大，以及页面容易抖动。
2，css实现：position: sticky;可以规避以上缺点；缺点是IE不兼容，不过亲测Edge是支持的，毕竟Edge已经拥抱Chromium了。

position: sticky说明–参阅MDN解释如下：

// 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }
// 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

// 粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

代码示例：

<html lang="zh-en">
    <head>
      <style>
        body {
          position: relative;
        }
        .nav {
          width: 100%;
          height: 10%;
          background: red;
          position: sticky;
          z-index: 100;
          top: 0;
        }        
        .banner {
          width: 100%;
          height: 10%;
          background: blue;
          position: sticky;
          z-index: 100;
          top: 0;
        }
        .content {
          width: 100%;
          height: 10%;
          background: gray;
          position: relative;
          z-index: 0;          
        }
      </style>
    </head>
    <body>
      <div class="nav">nav</div>
      <div class="banner">banner
        <br/>
        向上滚动过程中：1，nav会消失逐渐；2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；3,content会向上走并逐渐被隐藏；
      </div>
      <div class="content">content1</div>
      <div class="content">content2</div>
      <div class="content">content3</div>
      <div class="content">content4</div>
      <div class="content">content5</div>
      <div class="content">content6</div>
      <div class="content">content7</div>
      <div class="content">content8</div>
      <div class="content">content9</div>
      <div class="content">content10</div>
      <div class="content">content11</div>
      <div class="content">content12</div>
    </body>
</html>

点击此超链接跳转到Tom哥的博文分类和索引页面
Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820

[问题探讨]position: sticky;实现banner吸顶功能

需求：

分析：

position: sticky说明–参阅MDN解释如下：

代码示例：

猜你喜欢