我们发现了一个新功能,现在你可以创建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 中的Resource

    Android与ios相比,各种各样Resource算个独特之处.详情请参见官网Resource Types Resource有许多种,常见的有图像资源,布局资源,等等.每一种资源的位置都是固定的,这 ...

  2. [Android UI] shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  3. 引水入城(codevs 1066)

    题目描述 Description 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政 区划十分特殊,刚好构成一个N行M列的矩形,如上图所示,其中每个格子都代表一座城 市,每座 ...

  4. 如何给Eclipse中添加库(jar包)

    折腾Eclipse时,经常会遇到这种情况: 缺少某个库,找到之后,需要将该库,jar包,加入到当前项目,使得代码中的import xxx得以正常导入. 举例: [已解决]Eclipse的java代码出 ...

  5. js 在myeclipse中报错

    转myeclipse中的js文件报错   整理一下,希望帮到 遇到此问题的哥们.姐们. 方法一:myeclipse9 很特殊 和 myeclipse10 不一样,所以myeclipse9 不能使用该方 ...

  6. Android源码编译

    参考百度文章: http://jingyan.baidu.com/article/a501d80ce61ad0ec630f5e0b.html

  7. C# 编程音量控制

    public FrmVoice() { InitializeComponent(); } [DllImport("user32.dll", EntryPoint = "S ...

  8. java web开发问题集合

    前台和后台的交流到底是借助什么?servlet?xml? 我们能感觉到用servlet,但是我们是如何使用servlet的?不是现在web.xml部署后,才能触发吗?所以其实我们是本质是借助XML文件 ...

  9. AppInventor学习笔记(二)——Hello Purr

    一.设计组件 1.定义: 就是WPF中的控件一个意思,直接调用不需要知道怎么写的,只需要写响应函数即可. 2.Designer: (1)界面如下: (2)分区: ①预览窗口: 用于放置应用中所需的组件 ...

  10. mvc-4控制器和状态(2)

    访问视图 常见地视图模式时一个视图对应一个控制器,视图包含一个id,通过id传入控制器:在视图之中的元素则使用class 这里会使用jquery的选择器,为了减少使用,可以设置一个专门用于存放选择器到 ...