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

      

  • 相关阅读:
    BZOJ1183 Croatian2008 Umnozak 【数位DP】*
    算法--斯坦纳树
    BZOJ2595 Wc2008 游览计划 【斯坦纳树】【状压DP】*
    BZOJ1833 ZJOI2010 count 数字计数 【数位DP】
    BZOJ1087 SCOI2005 互不侵犯King 【状压DP】
    BZOJ1026 SCOI2009 windy数 【数位DP】
    pytest灵魂产物
    django限流全局和单个视图
    论文阅读笔记四十一:Very Deep Convolutional Networks For Large-Scale Image Recongnition(VGG ICLR2015)
    某线 生成式模型预测算法实习生面试总结
  • 原文地址:https://www.cnblogs.com/ruanyifeng/p/4167020.html
Copyright © 2011-2022 走看看