用jquery设定始终显示(随页面滚动)的元素

By
WP札记

标题比较让人费解,大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是,当然有时候,效果会更好一些,比如一般时候固定在某处,页面滚动使这个元素滚出显示边界之后,为了方便读者(或者展示广告),就把这个模块变成随页面滚动的。测试了一下效果还不错(当然IE6去死)。

很久没写过代码分享文章了。这里先说一下方法:获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。这里借 zww 大叔个图,如下(当然大叔不是这么弄的,不过效果类似):

fixed-block

下面是代码。

但是,有时候这样的方式会有问题,比如元素A上面有动态增长(缩短)的元素(比如突然js写入了一个东东),这样第一次获取的高度就不再合适。这样就需要设定一个锚点(这里设定为class id为scroller_anchor的div元素)(经zww大叔提醒将class改为ID)。代码如下:

上面用到的完整的html代码如下:

至于具体的css,请自己根据需要设定吧。

0

Comments: 22

  1. 杀你个发!话说为何你那个描点不用ID呢?听说效率比较高,哈。我那主题评论的效果用的是死方法,木有认真去学习。

    2012年08月31日
    • @zwwooooo 是这样吗?那我改改,还真没注意过这个。借用了大叔的图也没打招呼,哈哈~~

      @venmax 2012年08月31日
    • @axiu 反正以前看过一些效率方面的东东,说优先#,然后是元素,排最后的是.,直接.不如先找父元素#再find,嗯嗯,好像是这样。我的图就不用打招呼了,没找我要广告费就不错了。

      2012年08月31日
    • @zwwooooo 这么说来我果然是个只求效果,不求效率的人

      @venmax 2012年08月31日
    • @axiu 其实我们这些小网站不太需要注重效率,哈哈。

      2012年08月31日
    • @zwwooooo CSS里面是优先#的

      2012年09月02日
  2. 之前就看到这个效果了,一直不知道怎么实现

    2012年09月01日
  3. 这不是zww大叔的那个东西嘛。

    2012年09月01日
  4. 过来学习了,当时在大叔那里看了半天,最后默默的走过,原来是这样。

    2012年09月01日
    • @loke 我说“类似”~~没说就是

      @venmax 2012年09月04日
  5. 根据响应式设计的要求,宽度设百分比比较好

    2012年09月02日
  6. 这个只是会实现右侧sidebar里的模块跟随滑动,并不能实现类似zww那个滑动到最底下将评论框置于底部的效果吧?

    2012年09月04日
    • @TekTea 是的,想置于底部自己改改

      @venmax 2012年09月04日
  7. 方法不错,看你评论框下面有个input-text,是忘记隐藏了?

    2012年09月04日
    • @王叨叨 老实说,我也不知道那是个啥……

      @venmax 2012年09月04日
    • @axiu 难道是willin kan大师的那个ajax评论添加上的? :idea:

      2012年09月09日
  8. 很清爽的模板

    2012年09月19日
  9. 收藏,这个我暂时用不到

    2012年09月23日
  10. 太好了,终于找到啦! :twisted:

    2012年10月12日
  11. 大哥,能把改成么?坑坏我了。 :cry:

    2013年01月26日
    • @S 你说的啥意思……

      @venmax 2013年01月26日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: