/* ===========================================================
* 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 固定悬浮层以及固定表头的更多相关文章

  1. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  2. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  3. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  4. jQuery实现网页右下角悬浮层提示

    最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...

  5. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

  6. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  7. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  8. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  9. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. C#--深入分析委托与事件

    本篇文章将为你介绍一下 Delegate 的使用方式,逐渐揭开 C# 当中事件(Event)的由来,它能使处理委托类型的过程变得更加简单. 还将为您解释委托的协变与逆变,以及如何使用 Delegate ...

  2. Web API 入门指南 - 闲话安全(转)

    Web API 安全概览 安全隐患 1. 注入(Injection) 2. 无效认证和Session管理方式(Broken Authentication and Session Management) ...

  3. sql_查询select

    sql_查询select   /****** Script for SelectTopNRows command from SSMS ******/ [r_gonghao] ,[r_mingzi] , ...

  4. Linq连接数据库时,sql中的列为自增长,如何添加数据?

    1`首先在数据库中写入命令 SET IDENTITY_INSERT 表名 on 2·重新把表拖入 .dbml 中

  5. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  6. 使用FlashFXP V3.8烈火汉化绿色版软件连接Linux

    使用FlashFXP V3.8烈火汉化绿色版软件连接Linux 单击右上角的小闪电图标: 特别注意:出于安全考虑,FTP默认禁止使用root账号登陆Linux主机,必须使用除root用户以外的其他用户 ...

  7. 巧用Excel分列功能处理数据

    Technorati 标签: 数据处理      今天,主要工作就是处理测试数据,统计汇总成图表来显示.先来说说要求,然后给出我在折腾这堆数据中遇到的问题以及解决方法.   问题要求:       格 ...

  8. photoshop如何把阴影分离开(让阴影单独成为一个图层)

    作图的时候经常会用到,给图片加个投影,但有时还满足不了自己的需要,于是可以把投影分离开来单独操作投影. 图层->图层样式->创建图层 有时还需要滤镜->模糊 一下 哈哈,下次忘了来翻 ...

  9. iOS Foundation框架简介 -1.常用结构体的用法和输出

    1.安装Xcode工具后会自带开发中常用的框架,存放的地址路径是: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.plat ...

  10. uniform 中checkbox通过jquery 选中

    你是否曾经为不能修改多选框.单选框.文件选择框的样式而郁闷呢,是否想过控制它们的样式且兼容所有浏览器呢?我现在给你推荐的这个jQuery表单美化插件Uniform就可以解决这些问题. Uniform可 ...