这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果
一、应用展示关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:
随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示:
类似的效果在新浪微博上也有:
当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示:
此效果实现原理其实很简单,本文就将展示其实现。 二、实现原理默认状态就是默认状态,什么事情也不用做,定位是 absolute 也好,static 也好,都 ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其 position 属性,让其浮动在窗口的上沿显示就可以了。最好的 position 属性就是 fixed 了,可以在 IE6 + 和其他浏览器下浮动层平滑固定定位,由于 IE6 前辈不支持 fixed 属性,所以,后退一步,使用 absolute 属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。 现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就 OK 了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的 js 代码获得此值还是比较麻烦的,好在 JavaScript 库帮我们解决了这些工作,所以,我们的工作其实就很平坦,下面就将展示如何在 jQuery 库以及 MooTools 库下实现该效果。 三、jQuery 下的层的智能浮动 方法代码如下:
- $.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 页面,您会看到右侧自诩羞涩的浮动层了,滚动页面观察效果:
与 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 页面的滚动条,当 "羞涩" 的浮动层与浏览器边缘 "接触" 的时候,就不再跟随滚动条滚动了,如下图所示:
来自张鑫旭
来源: http://www.phperz.com/article/17/0425/282775.html