关闭边栏(ESC)打开边栏(ESC)
近来在弄底部功能固定在底部,需要实现的功能是WP博客的功能菜单固定在底部,在滚动条达到底的时候,取消固定,回到原来的位置上,离开底部的时候,又开始固定,这里用到了jquery动画中的animate,在实现的过程出现了些小问题,解决了好久哦,真是痛苦,以下些注意事项还是要引起注意的:
- animate中的属性基本是跟数值有关的,没有position这样的。
- 在滚动条事件中使用animate的时候,要考虑到一个问题,每次scroll都使动画反复触发,解决这个问题使用动画的 stop(),先停止动画:元素:stop()
- scroll每次触发会引起上百次的操作,为了优化操作, 使用节流阀,不然scroll每次都在触发。网上有关这些的。
下面是本站底部功能菜单中用到的效果代码
1 2 3 4 5 6 |
if (scrollTop<bodyH - windowH - footerH) { $('#footer .footer-feature .footer-menu').css('position','fixed') $('#footer .footer-feature .footer-menu').stop().animate({bottom:'0px'}); } else { $('#footer .footer-feature .footer-menu').stop().animate({bottom:'-60px'},function(){$(this).css('position','static')}); } |
昨天真是看了半天没看到 position,无语了。。
是啊,对jquery基础没学好,弄了半天