一个类似淘宝固定工具条的效果

在淘宝的列表页上有个列表排序的工具条,这个工具条默认显示是正常的,如图

tb1

,当滚动条往下拖动到该工具条的时候,改工具条就会始终固定在浏览器的顶部,就是position:fixed效果。

如图:

tb2

在当滚动条往上拖动的时候就会恢复原样,(可能表述不清楚,大家上淘宝自己去看吧。)

以前很讨厌这个效果,不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。

主要实现思路:在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值,如果滚动条卷掉的高度大于该工具条元素的Y坐标的值,那么将该工具条元素设置成position:fixed。

查看丑陋的demo:https://www.html.cn/demo/fixedbar/fixedBar.html

这个效果不支持ie6,因为ie6不支持position:fixed,暂时的委屈ie6用户,我恨ie6。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个类似淘宝固定工具条的效果

评论 13

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    我喜欢用改className的方式

    aoao9年前 (2009-10-10)回复
  2. #-48

    以前还真没注意到这里 学习。。。

    柴鸡不柴9年前 (2009-10-10)回复
  3. #-47

    是呀。fix,IE6它老人不支持!

    stri9年前 (2009-10-11)回复
  4. #-46

    滚动到下面就不对咯,出现了”1111″

    啄米鸟9年前 (2009-10-12)回复
  5. #-45

    好文章

    sin9年前 (2009-10-16)回复
  6. #-44

    这个效果不错,用起来很舒服

    晴枫9年前 (2009-10-18)回复
  7. #-43

    回4楼:那不是bug,是另外一个用于测试的层……看下源码就知道了

    styler9年前 (2009-10-19)回复
  8. #-42

    可惜ie6不支持

    guangtianxia9年前 (2009-10-22)回复
  9. #-41

    恩浩东西 谢谢了 要是IE6能支持就 太好了

    阿超9年前 (2009-11-09)回复
  10. #-40

    代码写得不错

    大蛇9年前 (2009-11-20)回复
  11. #-39

    如果想让IE6也支持的话该怎么弄啊?

    KELE8年前 (2010-12-01)回复
  12. #-38

    百度有啊很久就有这个工能了。

    路过8年前 (2010-12-10)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏