zoukankan      html  css  js  c++  java
  • 170207、粘性定位实现滚动到指定位置元素固定显示

    CSS中 position 属性设置元素的定位方式,为将要定位的元素定义定位规则

    元素主要有以下几种定位方式

    • position: static;

    • position: relative;

    • position: absolute;

    • position: fixed;

    • position: sticky;

    position:sticky是一个新的css3属性,在之前,如果希望某元素在页面滚动到某处时固定在窗口某个位置,需要监听滚动事件,然后按指定阀值将元素的定位方式从reletive切换到fixed,这种效果不够平滑,尤其是在ios上,页面滚动时会暂停js的执行,直到滚动结束,粘性定位可以很好解决这个问题

    static 
    静态定位,元素处于文档流中,此时 top, right, bottom, left 和 z-index 属性无效

    relative 
    相对定位,根据top,bottom,left,right属性在正常的文档流中偏移元素的位置,z-index有效

    absolute 
    绝对定位,脱离文档流,相对于 static 定位以外的最近的祖先元素进行定位,将其定位在指定位置相对于其最近定位的,如果没有,则相对于根元素

    fixed 
    固定定位,脱离文档流,相对于视口进行定位,滚动时,元素的位置不变

    sticky 
    粘性定位,元素处于文档流中,采用相对定位,但会在滚动到某个位置时变为fixed定位,且相对于其最近的块级祖先元素进行定位

    用法

    .sticky { position: sticky; top: 10px; }

    在viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下

    需要注意的是sticky 生效应至少设置 top, right, bottom, left中的一个

    • 如果同时指定 top 和 bottom(非 auto),优先采用 top

    • 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right

    浏览器支持 
    OS 6+ and Safari 6.1+ 
    Firefox 32+ 
    chrome 56 Beta

  • 相关阅读:
    mysql触发器的实战经验
    mysql存储程序查看
    索引性能优化(待整理)
    MySQL性能测试工具
    列级触发器 SQL Server
    synthetic division
    This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de
    mysql触发器和定时器
    数据库触发器有以下的作用
    mysql 日志
  • 原文地址:https://www.cnblogs.com/zrbfree/p/6379421.html
Copyright © 2011-2022 走看看