When the page scrolls, the smart floating layer begins to fade out browser When a window is displayed, it floats on the top edge of the browser window. This effect is common on major websites in China, such as Sina micro-blog , Taobao, etc.
Implementation principle:
The default state is the default state. You don't need to do anything. The positioning is either absolute or static. The key is that when the browser scrolls and the object (the layer to be floated) wants to remove the browser interface viewport, modify its position attribute to float on the top edge of the window. The best position attribute is fixed, which can be set in IE6 +The floating layer under other browsers is positioned smoothly and fixedly. Since IE6 predecessors do not support the fixed attribute, we will step back and use the absolute attribute instead, but there will be side effects&mdash& mdash; Scrolling is not smooth. However, there is no way out.
The key now is how to determine the contact between the current layer and the upper edge of the browser window? When the floating layer touches the upper edge of the browser window, the vertical offset value of the page is actually the same as the rolling height of the page, so it is OK to use this to judge, but how to obtain the vertical distance between the elements on the page and the page? It is troublesome for pure js code to obtain this value. Fortunately, the JavaScript library helps us solve these problems, so our work is actually smooth. The following shows how to achieve this effect in the jQuery library and MooTools library.
Implementation method:
There are two methods of implementation, one is based on Jquery, and the other is MooTools library.
Method 1: Based on Jquery
JavaScript code
$.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)); }); };
Call code:
JavaScript code
$("#float").smartFloat();
Method 2: based on Mootools library
JavaScript code
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); } };
Call code:
JavaScript code
$smartFloat($("float"));
