码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 固定悬浮层以及固定表头

时间:2014-12-16 14:55:27      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   ar   io   os   java   on   

/* ===========================================================
 * 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 固定悬浮层以及固定表头

标签:des   style   blog   http   ar   io   os   java   on   

原文地址:http://www.cnblogs.com/ruanyifeng/p/4167020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!