麦乐购m6go详情滚动居顶部特效

作者:林炜贤来源:www.163css.com发表时间:(2012-09-12)

我第一次见到这个功能,印像中是在联通商城,当时觉得很神奇:

就是在详情页面,当我向下拉动滚动条时,你会发现产品详情TAB那一块,会居于顶部,这样的用意在于方便用户查看TAB的内容,能够想到这一点,真是细心,后来我发现在天猫商城也有这个功能,一个好的创意,大家都在模仿。

我们进入麦乐购,这是一个买奶粉的商城,准确地说应该是母婴商城,上面除了奶粉还有妈妈用品,估计生意不错,怀孕的时候,很多妈妈都会上这个网站,那们,我们选择一个奶粉进去,同样是我们熟悉的页面,左右结构,右侧有产品放大镜功能,还有价钱,及购买按钮。

这个地方,是我们今天介绍的重点,跟联通一样,它也会跟着滚动条移到顶部,但是它把价钱及抢购按钮也放上去了,会不会增加用户购买的机率呢?

熟悉CSS代码的人,会想到fix这个功能,它可以实现定位,并且不跟随滚动条滚动。。。

从代码上,我们可以看出,我们是通过对比strollTop和top的位置,然后切换CSS定位,上面的window.xmlhttprequest是用来实现区分IE6的,今天在明白,在JS中也是有HACK的。。。

关于$.fn是用于实现jquery扩展的,大家可以百度一下。。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/09/fixroll/index.html

下载地址:麦乐购m6go详情滚动居顶部特效 .zip

返回作者主页:www.163css.com阅读 (4319)
更多 1