我们发现了一个新功能,现在你可以创建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. Flash Player 19.0.0.124 Beta + IHTMLDocument3 IHTMLDocument2 ->get_innerHTML

    安装 Flash Player 19 之后 有 flash 动画的网页中 IHTMLDocument3 IHTMLDocument2 ->get_innerHTML 获取的 html 内容都是空 ...

  2. PHP--TP框架----操作数据库

    //操作数据库                    //$attr = $m->select(); //查询所有数据                    //$attr = $m->s ...

  3. 使用Memory Analyzer tool(MAT)分析内存泄漏(二)

    转载自:http://www.blogjava.net/rosen/archive/2010/06/13/323522.html 前言的前言 写blog就是好,在大前提下可以想说什么写什么,不像投稿那 ...

  4. HTML5学习记录1-新特性

    新特性 HTML5 中的一些有趣的新特性: 1. 用于绘画的 canvas 元素 2. 用于媒介回放的 video 和 audio 元素 3. 对本地离线存储的更好的支持 4. 新的特殊内容元素,比如 ...

  5. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

  6. an error occurred during the file system check错误的解决

    [root@GIT ~]# fsck -A /dev/mapper/VolGroup-lv_root 下面的选择,一路Y就行了,最后reboot,问题解决!

  7. xampp 访问出现New XAMPP security concept

    在浏览器输入 http://60.10.140.22/xampp出现以下错误信息: Access forbidden! New XAMPP security concept: Access to th ...

  8. XtraScrollableControl 滚动条控件随鼠标滚动

    using System; using System.Windows.Forms; using DevExpress.XtraEditors; namespace WindowsFormsApplic ...

  9. SQL DEVELOPER工具找不到database时的解决

    1.配置SQL DEVELOPER管理工具 这里省略Oracle数据库和PL/SQL Developer的安装步骤,注意在安装PL/SQL Developer软件时,不要安装在Program File ...

  10. hdu 4831

    写了一个小时题目看错了,艹 自己百度吧