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

赞 (0)

相关推荐

  • 经典的带阴影的可拖动的浮动层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>MyPixbot</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language

  • 关于flash遮盖div浮动层的解决方法

    网上的解决方案: From:http://codingforums.com/showthread.php?t=95109 (a) place Flash embed script in <div> container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中] (b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本] (c) set <div i

  • jQuery powerFloat万能浮动层下拉层插件使用介绍

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque

  • 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

  • 基于jquery的浮动层效果代码

    本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义. jquery浮动层 #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;} $(document).ready(function(){ $(window).scroll(function (){ var offsetTop = $(window).scrollTop()

  • 仿CSDN 右下角悬挂的浮动层效果

    ads body{ font-size:12px; margin:0px; } /**for ads**/ h1{ font-size:14px; } .ads{ margin:0px auto; width:325px; height:190px; border:1px solid #ddd; } CSDN右下角悬挂效果 #ads_14{ float:right; font-family: verdana,sans-serif; } #ads_14 H6 { width:282px; heig

  • jQuery实现页面滚动时层智能浮动定位实例探讨

    jQuery实现页面滚动时层智能浮动定位实例探讨

    各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现.....没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0:固定显示: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html > <head> <title>jQuery实现页面滚动时层智能浮动定位</title> <meta name

  • js 浮动层菜单收藏

    使用说明 即仅需把附件中的 JS 文件和 CSS 文件引用到网页里,如: 复制代码 代码如下: <script type="text/javascript" src="DivMenu.js"></script> <link href="DivMenu.css" rel="stylesheet" type="text/css" /> 在线演示 http://img.jb51

  • 超级兔子让浮动层消失的前因后果

    刚搞定了瑞星卡卡,又冲来个超级兔子.不过超级兔子的枪法真的有待改善. 还是同样的问题:安装了超级兔子IE工具条的用户购买自动发货商品时,LightBox形式的购买提醒框刚一显示就消失了.而灰蒙的遮蔽层依然显示,用户又无法继续操作了. 根据研究,超级兔子对屏蔽广告的屏蔽原则更为武断,只要是在JavaScript代码中出现类似 "div.style.position=absolute" 的代码,div 就会被隐藏,不仅如此,超级兔子还会检查页面中的元素,只要一个元素以inline形式设置了

  • 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(&q

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

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

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

  • Javascript实现页面滚动时导航智能定位

    Javascript实现页面滚动时导航智能定位

    常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di

  • jQuery实现页面滚动时智能浮动定位

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title> <style type="text/css"> * { mar

  • vue实现页面滚动到底部刷新

    本文实例为大家分享了vue实现页面滚动到底部刷新的具体代码,供大家参考,具体内容如下 h5页面 <script> var app = new Vue({ el: '#app', data: { swiper: null, carousel: [], promotion: [], cates: [], //设置size初始为10 size:10, }, mounted: function () { //定义that用that.size获取size的值 var that=this; getProm

  • 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"> <head> <meta http-equiv=&qu

  • 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 实现的页面滚动时浮动窗口控件

    JQuery 实现的页面滚动时浮动窗口控件

    1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置.同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了.有时候如果需要做个比较好用的导航条,使用这个控件挺不错的. 2. Code & Properties: 这个js文件是在jQuery和JQeury UI的核心上扩展的.所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js. 整个javascript如

随机推荐