js页面滚动时层智能浮动定位实现
直接上代码
$.fn.smartFloat = function (className) {
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.addClass(className);
} else {
element.removeClass(className);
}
} else {
element.removeClass(className);
}
});
};
return $(this).each(function () {
position($(this));
});
};
.fixed {
position: fixed;
top: 0;
z-index: 10;
width: 990px;
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,.1);
-moz-box-shadow: 0 4px 4px rgba(0,0,0,.1);
box-shadow: 0 4px 4px rgba(0,0,0,.1);
}
//选择要加载的层和要加载的样式
$(".filters").smartFloat("fixed");
js页面滚动时层智能浮动定位实现的更多相关文章
- Javascript实现页面滚动时导航智能定位
遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
先看效果: 阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部) 原理:直接使用css 进行控制:缺点:不兼容ie6-: 实现:positi ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- 原生Js页面滚动延迟加载图片
原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...
- JQuery Mobile+JS实现智能浮动定位导航条
实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- scrollReveal.js – 页面滚动显示动画JS
简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 ...
- scrollReveal.js页面滚动动态效果
scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScrip ...
随机推荐
- RMQ_ST表
]; ]; ]; void init(int n) { int i, j; pwr[] = ; ; i<; ++i) pwr[i] = pwr[i-] << ; ; pwr[j]&l ...
- thrift使用案例
参考资料:http://www.ibm.com/developerworks/cn/java/j-lo-apachethrift/ 首先是定义thrift IDL接口,如下(SunTelTc.thri ...
- 测试那些事儿—Linux搭建环境基础步骤
Linux搭建环境基础步骤 准备工具:SecureCRT工具(Linux工具,连接服务器)FTP传输工具(上传文件到服务器)MySQL连接工具 安装包(以下文件均为压缩包rpm格式和tar.gz):J ...
- dfs——n的全排列(回溯)
#include <iostream> #include <cstring> #include <string> #include <map> #inc ...
- java list 的遍历
import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; import java.util.I ...
- Java异常处理的方法
1.异常概述在程序中,错误可能产生于程序员没有预料到的各种情况,或者是超出了程序员可控制范围的环境因素,如用户的坏数据.试图打开一个根本不存在的文件等.在Java中这种在程序运行是可能出现的一些错误称 ...
- Windows共享设置
Windows文件共享默认是开启的,任何用户都可以方便的设置共享目录.那么如何关闭并禁止呢. ====打开或关闭网上邻居的网络发现:1. 右键单击,网上邻居,弹出菜单选择:属性,打开网络和共享中心界面 ...
- Linux下安装搜狗拼音输入法
1.安装 下面命令即可完成安装: sudo apt-add-repository ppa:fcitx-team/nightly sudo apt-get update sudo apt-get ins ...
- 【数据库】jdbc详解
try { if(resultSet!=null){ resultSet.close(); } }catch (SQLException e){ e.printStackTrace(); }final ...
- diskcache
DiskCache: Disk Backed Cache DiskCache is an Apache2 licensed disk and file backed cache library, wr ...