文章关键字 ‘fixed’

杀了个回马枪,还是说说position:sticky吧

2018年12月2日,星期日

sticky布局效果缩略图

position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:sticky了,不要被人留下厚此薄彼的口舌。结果一关心,竟然发现,sticky定位要比预想的更强大,更有趣……

阅读全文…

一行CSS实现滚动时藏在信息流后面的广告效果

2018年07月14日,星期六

夏日炎炎,今天宅在家里刷微博的时候,刷到了个关于信息流广告的视频,说的是某产品信息流在阅读时候,后面会腾空出现广告,就像广告一直藏在你信息流的背后一样,随着你滑动,广告会慢慢看不到。这个广告效果在web中该如何实现呢?

我就把几个idea都试验了下,发现都可以实现类似的效果,一起来看看吧……

阅读全文…

深入理解CSS中的层叠上下文和层叠顺序

2016年01月9日,星期六

本文是最近1-2个月最用心的文章,理解本文内容,就会明白网页中元素层叠的时候为什么会这样表现了,相信本文的内容一定会对您的学习有所帮助的。

阅读全文…

了不起的IE7浏览器-CSS新特性-实现与思维变革

2015年07月30日,星期四

以前在我还需要兼容IE6浏览器的时候,我总觉得IE6和IE7浏览器是一个路子的一个货色,很多bug和行为表现是一致的。认为,要兼容IE7和兼容IE7基本上没多大差别。后来深入实践发现,之前的想法有些天真了。实际上,IE7浏览器下,我们也能实现很多好玩且有价值的东西……

阅读全文…

CSS3 transform对普通元素的N多渲染影响

2015年05月21日,星期四

一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0,0)),但是,实际上,对这些元素还是造成了写深远的影响。所谓表面无恙,内心奔溃的真实写照。

本文就列举几个目前我所知的transform影响CSS2.1中普通元素渲染表现的例子……一如既往,有Demo,有截图,有必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助~~

阅读全文…

js页面滚动时层智能浮动定位实现(jQuery/MooTools)

2010年11月11日,星期四

关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了。类似的效果在新浪微博上也有,页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,此效果实现原理其实很简单,本文就将展示其在jQuery和MooTools下的实现。提供代码以及demo效果展示,希望能对您的学习有所帮助。

阅读全文…