zoukankan      html  css  js  c++  java
  • CSS 吸顶效果

    转载至:https://laixiazheteng.com/article/page/id/3GkrXEZVxLHK

    常用场景
    导航栏
    字母列表

    HTML

    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>

    CSS

    .box {
      position: -webkit-sticky;
      position: sticky;
      width: 100%;
      height: 30px;
      text-align: center;
      color: #fff;
      margin-bottom: 50px;
    }
    
    .box1 {
      top: 0;
      z-index: 1;
      background: #007bff;
    }
    
    .box2 {
      top: 30px;
      z-index: 1;
      background: #ffc107;
    }
    
    .box3 {
      background: #f4516c;
    }

    在上面的例子中,我们给三个div都设置了position: sticky 但由于top值有所不同,产生的效果也有所不同。

    box1、box2、box3在滚动之前,它们与相对定位一样
    当到达某一个位置时,表示与绝对定位一样著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: https://laixiazheteng.com/article/page/id/3GkrXEZVxLHK © ghmagical.com
    要实现导航吸顶效果,我们一般使用的是监听scroll,然后设置导航的position: fixed以达到固定在顶部的效果。这种导航吸顶效果的实现方法网络上已经N多种,今天肯定不是再来介绍一次,而是介绍另外一种更为简单的实现方法。

    在介绍真正实现方法之前,我们先来了解一下position,它有多少个属性值呢?

    可能你会毫不犹豫的想到:著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: https://laixiazheteng.com/article/page/id/3GkrXEZVxLHK © ghmagical.com
    要实现导航吸顶效果,我们一般使用的是监听scroll,然后设置导航的position: fixed以达到固定在顶部的效果。这种导航吸顶效果的实现方法网络上已经N多种,今天肯定不是再来介绍一次,而是介绍另外一种更为简单的实现方法。

    在介绍真正实现方法之前,我们先来了解一下position,它有多少个属性值呢?

    可能你会毫不犹豫的想到:著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: https://laixiazheteng.com/article/page/id/3GkrXEZVxLHK © ghmagical.com
    要实现导航吸顶效果,我们一般使用的是监听scroll,然后设置导航的position: fixed以达到固定在顶部的效果。这种导航吸顶效果的实现方法网络上已经N多种,今天肯定不是再来介绍一次,而是介绍另外一种更为简单的实现方法。

    在介绍真正实现方法之前,我们先来了解一下position,它有多少个属性值呢?

    可能你会毫不犹豫的想到:著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: https://laixiazheteng.com/article/page/id/3GkrXEZVxLHK © ghmagical.com
  • 相关阅读:
    java 编译
    MapReduce
    搜索引擎中index、attribute和summary概念
    正排索引和倒排索引简单介绍
    SVN 使用
    PlantUML + Chrome 联合使用
    vim 多标签和多窗口
    关于数据库不适合docker的原因(摘抄)
    跨域
    is_valid校验机制
  • 原文地址:https://www.cnblogs.com/qffxj/p/12515467.html
Copyright © 2011-2022 走看看