Jquery 固定悬浮层以及固定表头
/* ===========================================================
* jquery.autofix_anything.js v1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* Fix position of anything on your website automatically
* with one js call
*
* https://github.com/peachananr/autofix_anything
*
* ========================================================== */ !function($){ var defaults = {
customOffset: false,
manual: false,
onlyInContainer: true
}; $.fn.autofix_anything = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
curpos = el.position(),
offset = settings.customOffset,
pos = el.offset(); el.addClass("autofix_sb") $.fn.manualfix = function() {
var el = $(this),
pos = el.offset();
if (el.hasClass("fixed")) {
el.removeClass("fixed")
} else {
el.addClass("fixed").css({
top: 0,
left: pos.left,
right: "auto",
bottom: "auto"
});
} } fixAll = function(el, settings, curpos, pos){
if (settings.customOffset == false) offset = el.parent().offset().top
if($(document).scrollTop() > offset && $(document).scrollTop() <= (el.parent().height() + (offset - $(window).height()))) {
el.removeClass("bottom").addClass("fixed").css({
top: 0,
left: pos.left,
right: "auto",
bottom: "auto"
});
} else {
if($(document).scrollTop() > offset) {
if (settings.onlyInContainer == true ) {
if($(document).scrollTop() > (el.parent().height() - $(window).height())) {
el.addClass("bottom fixed").removeAttr( 'style' ).css({
left: curpos.left
});
}else {
el.removeClass("bottom fixed").removeAttr( 'style' ); }
}
} else {
el.removeClass("bottom fixed").removeAttr( 'style' );
}
} }
if (settings.manual == false) {
$(window).scroll(function() {
fixAll(el, settings, curpos, pos)
});
} }
}(window.jQuery);
.autofix_sb.fixed {
position: fixed !important;
left: auto;
top: auto;
right: auto;
bottom: auto;
height: 100%;
overflow:auto;
<script type="text/javascript">
$(document).ready( function() {
$(".sidebar").autofix_anything();
}); </script>
} .autofix_sb.fixed.bottom { bottom: 0; position: absolute !important; }
Jquery 固定悬浮层以及固定表头的更多相关文章
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...
- jQuery实现网页右下角悬浮层提示
最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...
- jQuery弹出层始终垂直居中相对于屏幕或当前窗口
把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- JQuery弹出层,实现弹层切换,可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- DynamicObject数据包操作
DynamicObject的结构非常简单明了,就是一个字典,类似于一个Dictionary<string, object>,其中的object可能是一个简单值(普通字段),可能是一个复杂值 ...
- javascript中ajax post实例详解
一,原生态的XMLHttpRequest 代码如下 复制代码 <script language="javascript"> function savei ...
- Ruby on Raisl应用(一):在Rails上配置Mongoid+Mongodb
一. 概述 最近考虑用ruby on rails 搭建一套Blog系统,前端考虑用Bootstrap,数据库用Mongodb.由于之前没有相关应用经验.先记录下整个项目过程. 现有资源: Mac 笔记 ...
- Objective-C设计模式——抽象工厂模式Abstract Factory(对象创建)
抽象工厂模式 理解了工厂方法模式,其实抽象工厂和工厂方法模式有很多的相似之处.抽象工厂同样是分离客户端对象的创建和逻辑代码的,但是抽象工厂往往是产生一组数据而不单单是产生一个产品. 抽象工厂提供一个创 ...
- 什么是GPX
GPX(GPS eXchange Format, GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式. 它可以用来描述路点.轨迹.路程.这个格式是免费的,可以在不需要付任何许可费用的 ...
- http: URL、请求方式
URL:统一资源定位符,可以从互联网得到和访问资源,是标准资源的位置 结构包括协议.服务器名称(IP地址).端口(有的服务器需要).路径.文件名 协议:告诉浏览器如何处理打开的文件,常用的就是http ...
- 杭电ACM2098--分拆素数和
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2098 这是源码.其实我本不想拿出源码,毕竟源码很容易被复制. 我这里刚开始出错的地方有 0_0_12811 ...
- IE Problem : inetcpl.cpl
从windows8升级windows8.1后每次关闭ie11浏览器总是跳出出现一个问题导致关闭,我都快疯了,以前windows8一点问题都没有.这是怎么回事?还有能回到ie10吗?(张浩228) 小昕 ...
- sicily 1010. 单词数值
本题主要是Hash思想的应用 课程上机练习题 Contest ends in 8 months 27 days
- iOS开发之窗口和视图
视图就是应用程序的界面.视图可以使用nib文件实现,也可以使用代码创建.一个视图也是一个响应器(UIResponder的子类)这意味着一个视图可以与用户交互.因此,视图不只是用户可看到的界面,也是可以 ...