智能浮动层定位解决方法

web前端622908年前

当页面滚动,智能浮动层开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示。这种效果在国内各大网站屡见不鲜,比如新浪微博、淘宝网等。


实现原理:

默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。

现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库帮我们解决了这些工作,所以,我们的工作其实就很平坦,下面就将展示如何在jQuery库以及MooTools库下实现该效果。

 

实现方法:

实现的方法有两种,一种是基于Jquery,一种是MooTools库。

方法一:基于Jquery

JavaScript代码
$.fn.smartFloat = function() {      var position = function(element) {          var top = element.position().top, pos = element.css("position");          $(window).scroll(function() {              var scrolls = $(this).scrollTop();              if (scrolls > top) {                  if (window.XMLHttpRequest) {                      element.css({                          position: "fixed",                          top: 0                      });                  } else {                      element.css({                          top: scrolls                      });                  }              }else {                  element.css({                      position: "absolute",                      top: top                  });              }          });      };      return $(this).each(function() {          position($(this));      });  };


调用代码:

JavaScript代码
$("#float").smartFloat();

 

方法二:基于Mootools库

JavaScript代码
var $smartFloat = function(elements) {      var position = function(element) {          var top = element.getPosition().y, pos = element.getStyle("position");          window.addEvent("scroll", function() {              var scrolls = this.getScroll().y;              if (scrolls > top) {                  if (window.XMLHttpRequest) {                      element.setStyles({                          position: "fixed",                          top: 0                      });                  } else {                      element.setStyles({                          top: scrolls                      });                  }              }else {                  element.setStyles({                      position: "absolute",                      top: top                  });              }          });      };      if ($type(elements) === "array") {          return elements.each(function(items) {              position(items);          });      } else if ($type(elements) === "element") {          position(elements);      }  };


调用代码:

JavaScript代码
$smartFloat($("float"));