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

  

时间: 2024-11-13 09:38:33

Jquery 固定悬浮层以及固定表头的相关文章

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

在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚动 html code(source table): <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="tabl

jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对

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

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML

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

最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是Discuz右下角悬浮层提示的.运行效果如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

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

在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件使用后效果都不理想,所以决定自己动手,丰衣足食. 我的思路来自:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 使用四个table,其中一个为saiku原有的,再增加3个,思路效果图: js代码实现: 1.找到SaikuTab

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

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

jquery弹出层

Ug,一个轻量级的js组件.web弹窗(层)解决方案 .网址:http://ug66.cn/ 效果预览: Ug,简洁的代码.灵活的自定义,您只需简单地调用,即可轻松实现各种弹出效果. Ug,她尽可能地以更少的代码展现出更强健的功能,让您的页面拥有更丰富与便捷的UI体验. Ug.格外注重性能的提升.易用和实用性. 鄙人必须中止“王婆卖瓜”的陈述,因为一切的不足或友好,都需阁下在使用过程中去发现. jquery弹出层,布布扣,bubuko.com

jQuery Layer 弹层组件

layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升.易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer.layer兼容了包括IE6在内的所有主流浏览器. 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎.当然,这种"王婆卖瓜"的陈