我们发现了一个新功能,现在你可以创建sticky块元素了。这和 fixed 块元素一样,但不同的是, sticky 块元素是不会遮挡另一个块元素的,最好看看demo

类似的功能实现还可以使用jquery.pin(http://www.bootcss.com/p/jquery.pin/) 

 position: sticky;

使用硬件加速

有时,你的动画效果在客户端的计算机上会减慢,为了防止这种情况发生,你可以为特定的块元素使用加速:

.block {
    transform: translateZ(0);
}

触摸设备上的块元素滚动

在触摸设备上,如果你有一些块元素在内部有滚动,则你不仅需要添加 overflow: scroll / auto,还要添加:

-webkit-overflow-scrolling: touch;
 

Css - 黑魔法的更多相关文章

  1. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  2. 22个CSS黑魔法

    原链接:http://www.ido321.com/1665.html Hey there! Today we are going to talk about some useful tricks i ...

  3. css黑魔法

    多行文本溢出显示省略号(...)的方法 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-li ...

  4. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  5. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  6. 理解Flexbox:你需要知道的一切

    这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备. 学习Flexbox的曲线 @Philip Roberts在Twitte ...

  7. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. sqlserver的执行计划

    一:执行计划生成过程 说到执行计划,首先要知道的是执行计划大概生成的过程,这样就可以做到就心中有数了,下面我画下简图: 1. 分析过程 这三个比较容易理解,首先我们要保证sql的语法不能错误,sele ...

  2. Java for LeetCode 040 Combination Sum II

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  3. js如何往数组Array中添加元素

    转载自:http://blog.sina.com.cn/s/blog_95fa28e60101mwup.html unshift:将参数添加到原数组开头,并返回数组的长度  pop:删除原数组最后一项 ...

  4. HDU1005&&NEFU67 没有循环节

    Number Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  5. 关于printf函数输出先后顺序的讲解!!

    对于printf函数printf("%d%d\n",a,b);函数的实际输出顺序是这样的先计算出b,然后在计算a,接着输出a,最后在输出b:例子如下:#include<ios ...

  6. Quartus signal tapii 的使用

    此功能原来已经试验过,没有笔记.这次复习巩固下. 使用PLL 的程序. 1.新建signaltap ii 文件 注意以下几个地方,会用到 添加采样时钟 . 添加采样信号: 完成之后,编译下载 运行 两 ...

  7. .net学习笔记----会话状态Session

    一.会话状态Session Session用于服务器端状态管理,使用Session之后,每个客户端都可以将实际的数据保存在服务器上,对于每个客户端的数据,将会生成一个对应的唯一的key(保存在客户端) ...

  8. Wcf for wp8 使用iis Express 承载Wcf服务部署发布网站(三)

    我们接下来要做的是 本地电脑当作服务器(模拟外网服务器)来承载Wcf服务程序,通过引用本地电脑ip地址访问wcf服务程序接口 http://192.168.1.123/Service1.svc 一.先 ...

  9. wp7 BaseDictionary<TKey, TValue>

    /// <summary>/// Represents a dictionary mapping keys to values./// </summary>/// /// &l ...

  10. android开发 NDK 编译和使用静态库、动态库 (转)

    在eclipse工程目录下建立一个jni的文件夹 在jni文件夹中建立Android.mk和Application.mk文件 Android.mk文件: Android提供的一种makefile文件, ...