方法代码如下：
$.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));
});
};
调用很简单，直接一行代码就ok了，例如下面：
$(“#float”).smartFloat();
妥妥儿的，就一小段绑定就实现了id为float的标签有了智能浮动功能，效果描述就是：当id为float的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动了。
您可以狠狠地点击这里：jQuery下的层的智能浮动demo
打开demo页面，您会看到右侧自诩羞涩的浮动层了，滚动页面观察效果：
四、MooTools下的层的智能浮动
与jQuery实现一样，MooTools库下也已经将此方法包装了起来，代码如下：
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);
}
};
使用也是非常的简单，就一句代码，同样以id为float的标签举例，代码如下：
$smartFloat($(“float”));
您可以狠狠地点击这里：MooTools下的层的智能浮动demo
滚动demo页面的滚动条，当“羞涩”的浮动层与浏览器边缘“接触”的时候，就不再跟随滚动条滚动了，如下图所示： 
