JS page scrolling time layer intelligent floating position implementation (Jquery/mootools) _jquery

First, application display
About the layer of intelligent floating effect as early as a few years ago I was in some foreign personal website vertical navigation to see, now seems to be in some domestic commercial websites also repeatedly see this effect, such as Taobao search results page sorting horizontal bar, in the default state, scroll bar follow the page scrolling, as follows:

As the page scrolls down, when this horizontal bar touches the top edge of the browser, the horizontal bar is independent and does not follow the scroll bar, as shown in the following illustration:

Similar effects are also available on Sina Weibo:

When the page scrolls, the new dynamic prompts start to fade out of the browser window, floating on the top of the browser window, as shown in the following illustration:

The implementation of this effect is actually very simple, this article will show its implementation.

Ii. Principle of realization

The default state is the default state, nothing to do, positioning is absolute or static, all OK. The key is that when the browser scrolls, the object (the layer to be floated) to remove the browser interface viewport, modify its Position property, so that it floats on the top of the window along the display. The best position property is fixed, can be in ie6+ and other browsers floating layer smooth fixed positioning, because IE6 predecessors do not support the fixed property, so, take a step back, use the absolute property instead, but there will be side effects--scrolling is not smooth. But it is also a matter of no means.

The key now is how to tell the current layer to touch the top edge of the browser window? When the floating layer and the edge of the browser window contact the moment, the vertical offset of the page and the page's scrolling height is in fact the same, so use this to judge on the OK, but, how to get the page elements from the vertical distance of the page? Pure JS code to get this value is still more troublesome, fortunately, the JavaScript library to help us solve these tasks, so our work is actually very flat, below will show how the jquery library and MooTools Library to achieve this effect.

Three, the layer of jquery under the intelligent floating

The method code is as follows:

Copy Code code as follows:

$.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));
});
};

The call is simple, just one line of code is OK, such as the following:

$ ("#float"). Smartfloat ();
Well, it's a small piece of binding. The label with the ID float has an intelligent floating function, and the effect description is: When the element with the ID float touches the top edge of the browser when scrolling, it will not follow the scroll bar.

You can ruthlessly click here: jquery's layer of intelligent floating Demo

Open the Demo page, you will see the right side of the self-proclaimed shy floating layer, scrolling page observation effect:

The intelligent floating of the layer under four MooTools

As with jquery implementations, this method has been packaged under the MooTools library, as follows:

Copy Code code as follows:

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);
}
};

Use is also very simple, just a code, the same as the ID of float tag example, the code is as follows:

$smartFloat ($ ("float"));
You can ruthlessly click here: MooTools under the layers of intelligent floating Demo

Scrolling on the demo page, when the "shy" floating layer "touches" the edge of the browser, no longer follows the scroll bar, as shown in the following illustration:

From Rok Zhang Xinsen Xu