最近的项目是要实现一个点击显示隐藏边栏的效果，而且需要边栏随着滚动而滚动。

思路简单，不就一个css的动画和一个position为fixed，搞定！但不想，设为fixed的子元素竟然无法fixed，这下颠覆我了。千辛万苦，细致排除，终于发现是transform导致的fixed失效，而且目前似乎没有解决方案，除非绕过。同时，也借此算是彻底知道百度跟google的差距了。

有两篇较有用的文章谈到了这个，地址分别是http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/和http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue，可借此参考！

关于在transform下的子元素设置fixed无效的困惑的更多相关文章

  1. display:flex;下的子元素width无效问题

    因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...

  2. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  3. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  5. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 解决：子元素设置margin-top，父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  7. CSS子元素设置margin-top作用于父容器？

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  8. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 三种实现PHP伪静态页面的方法（转）

    PHP伪静态写法--其一 伪静态又名:URL重写 以下列举了三种方法. 方法一: 比如这个网页 http://www.2cto.com /soft.php/1,100,8630.html 其实处理的脚 ...

  2. BZOJ 3240: [Noi2013]矩阵游戏

    3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1586  Solved: 698[Submit][Status ...

  3. 利用FbinstTool+大白菜u盘工具，制作多系统启动U盘【转】

    一般制作多系统启动盘的教程都会要用到rub4dos+grubinst+ultraiso+msgdiyerl等等工具,一大串的工具列表让人望而生畏.其实大白菜里已经对这些工具做了非常好的封装,利用大白菜 ...

  4. Android json操作之取得一个对象

    1:服务端返回的json数据格式如下: {"id":"1001","name":"zhangsan","sco ...

  5. PYTHONE的WHILE，BREAK,CONTINUE示例

    简短示例: while True: s = raw_input('Enter something : ') if s == 'quit': break if len(s) < 3: print ...

  6. 如何判断一个C++对象是否在堆栈上（通过VirtualQuery这个API来获取堆栈的起始地址，然后就可以得到答案了），附许多精彩评论

      昨天有人在QQ群里问到如何判断一个C++对象是否在堆栈上, 我在网上搜索了下, 搜到这个么一个CSDN的帖子http://topic.csdn.net/t/20060124/10/4532966. ...

  7. Linux 安装字体

    把XP下的字体C:\WINDOWS\FONTS\simsun.ttc(也就是宋体,大小为10M),把他重命名为 simsun.ttf 拷贝simsun.ttf 字体到 /usr/share/fonts ...

  8. Java---设计模块(工厂方法)

    ★ 场景和问题 Java程序开发讲究面向接口编程,隐藏具体的实现类,可是如何得到接口呢? 工厂类的命名规范:***Factory 单例工厂方法的命名规范:getInstance() 工厂的本质是&qu ...

  9. PC格局已改变 联想未来的短板在哪里?

    PC格局已改变 联想未来的短板在哪里? 作者:孙永杰2013-11-13 11:34评论:15   [PConline 品科技](原文标题:PC格局已改:联想未来的短板在哪里?)近日,联想集团公布了截 ...

  10. SPOJ--K-query （线段树离线） 离线操作解决一些问题

    K-query Given a sequence of n numbers a1, a2, ..., an and a number of k- queries. A k-query is a tri ...