zoukankan      html  css  js  c++  java
  • 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; }

      

  • 相关阅读:
    css实现梯形
    CSS3自定义滚动条样式 -webkit-scrollbar
    MySQL-5.6.13免安装版配置方法
    CSS边框长度控制
    The Shapes of CSS(css的形状)
    CSS制作图形速查表
    使用onclick跳转到其他页面/跳转到指定url
    TCP/IP协议
    jQuery实现全选、反选和不选功能
    checkbox在vue中的用法小结
  • 原文地址:https://www.cnblogs.com/ruanyifeng/p/4167020.html
Copyright © 2011-2022 走看看