js页面滚动时层智能浮动定位实现(jQuery/MooTools)


Posted in Javascript onAugust 23, 2011

一、应用展示
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:

js页面滚动时层智能浮动定位实现(jQuery/MooTools)

随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示:
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

类似的效果在新浪微博上也有:
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示:
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

此效果实现原理其实很简单,本文就将展示其实现。 

二、实现原理

默认状态就是默认状态,什么事情也不用做,定位是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页面,您会看到右侧自诩羞涩的浮动层了,滚动页面观察效果:
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

四、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页面的滚动条,当“羞涩”的浮动层与浏览器边缘“接触”的时候,就不再跟随滚动条滚动了,如下图所示:
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
来自张鑫旭

Javascript 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
js 函数的副作用分析
Aug 23 #Javascript
javascript 运算数的求值顺序
Aug 23 #Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 #Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 #Javascript
You might like
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
解析php取整的几种方式
2013/06/25 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
JavaScript字符串检索字符的方法
2017/06/23 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python3 反射的四种基本方法解析
2019/08/26 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
Servlet的生命周期
2013/08/25 面试题
技术副厂长岗位职责
2013/12/26 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
致接力运动员广播稿
2014/02/17 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
大一新生检讨书
2014/10/29 职场文书
奖励通知
2015/04/22 职场文书