我们发现了一个新功能,现在你可以创建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. 如何提高cocos2d-x-spine骨骼动画加载速度

    下面分2点来说: 1. 时间消耗点:io和现场解析 解决方案:加载过的骨骼动画就不要每次重新加载,不要每次都去加载json文件和atlas,我推荐使用 static CCSkeletonAnimati ...

  2. Java入门学习知识点汇总

    Java入门重要知识点在这里总结一下,以方便日后复习,这部分内容主要有:变量和常量,常用的运算符,流程控制语句,数组,方法这些内容 一.变量和常量 1.Java关键字 先贴张图: 所有关键字区分大小写 ...

  3. [小细节,大BUG]记录一些小问题引起的大BUG(长期更新....)

    [小细节,大BUG] 6.问题描述:当从Plist文件加载数据,放入到tableView中展示时,有时有数据,有时又没有数据.这是为什么呢?相信很多大牛都想到了:我们一般将加载的数据,转换成模型,放入 ...

  4. Mysql查询比较

    创建一个表: article,书编码:dealer,书店:price ,书的价格. 导入一些数据: INSERT INTO shop VALUES (1,'A',3.45),(1,'B',3.99), ...

  5. Android之canvas详解

    首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...

  6. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

  7. Grid画边框

    public class GridHelper { //请注意:可以通过propa这个快捷方式生成下面三段代码 public static bool GetShowBorder(DependencyO ...

  8. ytu 2463:给小鼠补充代码(DFS 深度优先搜索)

    2463: 给小鼠补充代码 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 5  Solved: 2[Submit][Status][Web Board] ...

  9. Sql server之路 (六)上传服务器图片

    原理: 上传图片的名字 插入到数据库里 上传图片的内容(二进制数据) 写到服务器指定的目录下 下次读取图片的时候 从数据库里的指定字段里读取图片文件名 从数据库的指定路径下 拼串成完成的路径 就可以下 ...

  10. 代码实现UI控件

    参考 Android 用纯代码实现复杂界面