MooTools 页面滚动浮动层智能定位实现代码_Mootools

HTML代码:

复制代码 代码如下:

<div class="float" id="float">
我是个腼腆羞涩的浮动层...
</div>

JS代码:

复制代码 代码如下:

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

//绑定
$smartFloat($("float"));

时间: 2024-09-20 05:04:12

MooTools 页面滚动浮动层智能定位实现代码_Mootools的相关文章

jquery页面滚动浮动层智能定位种代码

我看到一个站长博客效果如下 然后我们看到最多的一般是这种 那么我们要如何实现第一种效果呢,问了那朋友说只要搜索 jquery 浮动层就可以解决了,搜索了一下发现几段代码非常的不错,一段是jquery浮动插件,另一种是zblog自带的功能,我都整理一下. 例子1.jquery smartFloat智能定位 HTML代码:  代码如下 复制代码 <div class="float" id="float">     我是个腼腆羞涩的浮动层... </di

jQuery页面滚动浮动层智能定位实例代码_jquery

HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q

js页面滚动时层智能浮动定位实现

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

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

一.应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下: 随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示: 类似的效果在新浪微博上也有: 当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示: 此效果实现原理其实很简单,本文就将展示其实现.  二.实现原理 默

不随页面滚动的层

提示:您可以先修改部分代码再运行 <body onscroll="d1.style.top=document.body.scrollTop+10"> <div id="d1" style="position:absolute; top:10px; width:100px; height:100px; background-color:red;"></div> <img width="1"

仿CSDN 右下角悬挂的浮动层效果_广告代码

CSDN右下角悬挂效果     微软启动最严厉反盗版验证 Mozilla建开发者工具实验室 Google Apps安全漏洞揭秘 微软发布Silverlight2 WinHEC邀您一起揭开Window 微软与您畅享[奇迹之 汽车信息化机遇与挑战 计算机程序的行为学 独立思考能力从哪里来 避免肥胖十五条法则 清明节第一次相亲 不要爱上论坛女人 IBM

jQuery实现浮动层随浏览器滚动条滚动的方法_jquery

本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jquery 智能浮动层定位解决方法

当页面滚动,智能浮动层开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示.这种效果在国内各大网站屡见不鲜,比如新浪微博.淘宝网等. 实现原理: 默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok.关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixe

jQuery实现div浮动层跟随页面滚动效果

 这篇文章主要介绍了jQuery实现div浮动层跟随页面滚动效果,需要的朋友可以参考下  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"