Discuz教程网

MooTools 页面滚动浮动层智能定位实现代码

[复制链接]
authicon dly 发表于 2011-9-8 16:30:21 | 显示全部楼层 |阅读模式
HTML代码:
  1. <div class="float" id="float">
  2. 我是个腼腆羞涩的浮动层...
  3. </div>
复制代码

JS代码:
  1. var $smartFloat = function(elements) {
  2. var position = function(element) {
  3. var top = element.getPosition().y, pos = element.getStyle("position");
  4. window.addEvent("scroll", function() {
  5. var scrolls = this.getScroll().y;
  6. if (scrolls > top) {
  7. if (window.XMLHttpRequest) {
  8. element.setStyles({
  9. position: "fixed",
  10. top: 0
  11. });
  12. } else {
  13. element.setStyles({
  14. top: scrolls
  15. });
  16. }
  17. }else {
  18. element.setStyles({
  19. position: "absolute",
  20. top: top
  21. });
  22. }
  23. });
  24. };
  25. if ($type(elements) === "array") {
  26. return elements.each(function(items) {
  27. position(items);
  28. });
  29. } else if ($type(elements) === "element") {
  30. position(elements);
  31. }
  32. };

  33. //绑定
  34. $smartFloat($("float"));
复制代码



上一篇:js页面滚动时层智能浮动定位实现(jQuery/MooTools)
下一篇:基于JQuery的Select选择框的华丽变身
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 08:54

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表