jquery 智能浮动层定位解决方法

时间：2013-10-19 编辑：简简单单来源：一聚教程网

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

实现原理：

默认状态就是默认状态，什么事情也不用做，定位是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"));

上一个： jquery判断浏览器类型与版本号
下一个：修订wordpress自动保存文章时间时隔

推荐专题

最新下载

热门教程

jquery 智能浮动层定位解决方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程