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

思路简单，不就一个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. CWnd类

    CWnd类的成员 .数据成员 m_hWnd 指明与这个CWnd对象相关联的HWND句柄 .构造和析构 CWnd 构造一个CWnd对象 DestroyWindow 销毁相关联的Windows窗口 .初始 ...

  2. 如何使用Reaver-PJ-Wi-Fi网络的WPA密码

    在正式开始之前,我还是要不厌其烦强调一下:知识就是力量,但是拥有力量不代表着可以为所欲为.触犯法律.同样,骑白马的不一定是王子,会开锁的也不一定是小偷.本文只是关于某些技术的实验与验证,只适用于学习. ...

  3. INNO setup 制作安装包

    1.获取SQLserver安装路径vardbpath:string;rtn:boolean;rtn := RegQueryStringValue(HKEY_LOCAL_MACHINE, 'SOFTWA ...

  4. Linux企业级项目实践之网络爬虫（29）——遵守robots.txt

    Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以 ...

  5. Android ListView嵌套Button,Button事件覆盖item事件解决办法

    方法就是修改item布局的xml文件: 在根布局里加上: android:descendantFocusability="blocksDescendants" 然后在按钮布局里加上 ...

  6. POJ3581---Sequence 后缀树组

    题意:n个数字组成的序列,第一个数字最大,,把序列分成3部分,每个部分分别翻转,输出翻转后字典序最小的序列.. 后缀数组变一下,,先求出 第一个分割的位置,,然后再求一次后缀数组,,求出第二个位置.. ...

  7. 关于apriori算法的一个简单的例子

    apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...

  8. openstack debugs

  9. HER COFFEE夜场代金券【1折】_北京美食团购_360团购导航

    HER COFFEE夜场代金券[1折]_北京美食团购_360团购导航 HER COFFEE夜场代金券

  10. iframe切换内容页仍然能自适应大小代码（含js）

    function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.cont ...