我们发现了一个新功能,现在你可以创建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. Android Studio在线安装Android SDK注意事项

    由于使用的Android studio自带了sdk23,然而其它版本的sdk并没有安装:这些天由于需要用到低版本的sdk,因而使用Android SDK Manager进行相应的更新.开始的时候老是无 ...

  2. Java for LeetCode 074 Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  3. [Android Pro] AndroidStudio导出jar包

    reference :  http://blog.csdn.net/beijingshi1/article/details/38681281 不像在Eclipse,可以直接导出jar包.Android ...

  4. Shopping(hdu 3768)

    题意:给你一个无向图,求从0号点开始遍历所有的指定点再回到0号点的最短路径 #include<cstdio> #include<iostream> #include<qu ...

  5. python基础——字符串和编码

    python基础——字符串和编码 字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用 ...

  6. mysql 数据库获取当前时间

    mysql> select now(); +---------------------+ | now() | +---------------------+ | 2016-05-27 17:34 ...

  7. JAVA基础学习之throws和throw的区别、Java中的四种权限、多线程的使用等(2)

    1.throws和throw的区别 throws使用在函数外,是编译时的异常,throw使用在函数内,是运行时的异常 使用方法 public int method(int[] arr) throws ...

  8. oracle 10g 学习之服务器端安装(1)

    Oracle 简介 lOracle 是殷墟出土的甲骨文(oracle bone inscriptions)的英文翻译的第一个单词 lOracle 公司是全球最大的信息管理软件及服务供应商,成立于197 ...

  9. 最新版Duilib在VS2012下编译错误的解决方法

            svn了好几次最新版本的项目源代码, 在VS2012下编译老是出错, 改了后没记录, 结果又忘记, 所以在此记录下.        这个问题很普遍, 非常多的人遇到.       至于 ...

  10. Android权限设置android.permission

    android.permission.ACCESS_NETWORK_STATE: 允许程序访问有关GSM网络信息(Allows applications to access information a ...