作为单独的插件附件

我使用的引导程序4删除了附件插件，替换为使用位置：粘性。作为单独的插件附件

但是，铬不支持。当移回自举3整个我的布局是拧。推荐的scrollpos-styler与bootstrap结合使用可怕。（https://github.com/acch/scrollpos-styler）

所以我想知道，是否有可能将词缀插件分开，所以我仍然可以在bootstrap 4中使用它？

2016-04-28 clankill3r

是的，可以。

您可以复制从引导3.插件不要忘了申报所需的CSS类：

.affix { 
    position: fixed; 
    top: 1rem; 
} 

.affix-bottom { 
    position: absolute; 
}

演示：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags always come first --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    
 
    <title> Bootstrap 4 project :: Home</title> 
 
    
 
    <!--Bootstrap CSS --> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> 
 
    <style> 
 
     .affix { 
 
    position: fixed; 
 
    top: 1rem; 
 
} 
 

 
.affix-bottom { 
 
    position: absolute; 
 
} 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <header style="height:200px;background-color:green;color:white">header</header> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
      <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" style="background-color:red; height:250px;"> 
 
       Affixed sidebar 
 
      </div> 
 
      </div> 
 
      <div class="col-md-9" style="height:150vh;"> 
 
       Content 
 
      </div> 
 
     </div>  
 
    </div> 
 
    <footer style="height:200px;background-color:black;color:white;">footer</footer> 
 
    
 
     <!-- jQuery first, then Bootstrap JS. --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
     <script src="https://cdn.rawgit.com/HubSpot/tether/v1.2.0/dist/js/tether.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 
 
     <script> 
 
    /* ======================================================================== 
 
* Bootstrap: affix.js v3.3.6 
 
* http://getbootstrap.com/javascript/#affix 
 
* ======================================================================== 
 
* Copyright 2011-2015 Twitter, Inc. 
 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
 
* ======================================================================== */ 
 

 

 
+function ($) { 
 
    'use strict'; 
 

 
    // AFFIX CLASS DEFINITION 
 
    // ====================== 
 

 
    var Affix = function (element, options) { 
 
    this.options = $.extend({}, Affix.DEFAULTS, options) 
 

 
    this.$target = $(this.options.target) 
 
     .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this)) 
 
     .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this)) 
 

 
    this.$element  = $(element) 
 
    this.affixed  = null 
 
    this.unpin  = null 
 
    this.pinnedOffset = null 
 

 
    this.checkPosition() 
 
    } 
 

 
    Affix.VERSION = '3.3.6' 
 

 
    Affix.RESET = 'affix affix-top affix-bottom' 
 

 
    Affix.DEFAULTS = { 
 
    offset: 0, 
 
    target: window 
 
    } 
 

 
    Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { 
 
    var scrollTop = this.$target.scrollTop() 
 
    var position  = this.$element.offset() 
 
    var targetHeight = this.$target.height() 
 

 
    if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false 
 

 
    if (this.affixed == 'bottom') { 
 
     if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom' 
 
     return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom' 
 
    } 
 

 
    var initializing = this.affixed == null 
 
    var colliderTop = initializing ? scrollTop : position.top 
 
    var colliderHeight = initializing ? targetHeight : height 
 

 
    if (offsetTop != null && scrollTop <= offsetTop) return 'top' 
 
    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom' 
 

 
    return false 
 
    } 
 

 
    Affix.prototype.getPinnedOffset = function() { 
 
    if (this.pinnedOffset) return this.pinnedOffset 
 
    this.$element.removeClass(Affix.RESET).addClass('affix') 
 
    var scrollTop = this.$target.scrollTop() 
 
    var position = this.$element.offset() 
 
    return (this.pinnedOffset = position.top - scrollTop) 
 
    } 
 

 
    Affix.prototype.checkPositionWithEventLoop = function() { 
 
    setTimeout($.proxy(this.checkPosition, this), 1) 
 
    } 
 

 
    Affix.prototype.checkPosition = function() { 
 
    if (!this.$element.is(':visible')) return 
 

 
    var height  = this.$element.height() 
 
    var offset  = this.options.offset 
 
    var offsetTop = offset.top 
 
    var offsetBottom = offset.bottom 
 
    var scrollHeight = Math.max($(document).height(), $(document.body).height()) 
 

 
    if (typeof offset != 'object')   offsetBottom = offsetTop = offset 
 
    if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element) 
 
    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element) 
 

 
    var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom) 
 

 
    if (this.affixed != affix) { 
 
     if (this.unpin != null) this.$element.css('top', '') 
 

 
     var affixType = 'affix' + (affix ? '-' + affix : '') 
 
     var e   = $.Event(affixType + '.bs.affix') 
 

 
     this.$element.trigger(e) 
 

 
     if (e.isDefaultPrevented()) return 
 

 
     this.affixed = affix 
 
     this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null 
 

 
     this.$element 
 
     .removeClass(Affix.RESET) 
 
     .addClass(affixType) 
 
     .trigger(affixType.replace('affix', 'affixed') + '.bs.affix') 
 
    } 
 

 
    if (affix == 'bottom') { 
 
     this.$element.offset({ 
 
     top: scrollHeight - height - offsetBottom 
 
     }) 
 
    } 
 
    } 
 

 

 
    // AFFIX PLUGIN DEFINITION 
 
    // ======================= 
 

 
    function Plugin(option) { 
 
    return this.each(function() { 
 
     var $this = $(this) 
 
     var data = $this.data('bs.affix') 
 
     var options = typeof option == 'object' && option 
 

 
     if (!data) $this.data('bs.affix', (data = new Affix(this, options))) 
 
     if (typeof option == 'string') data[option]() 
 
    }) 
 
    } 
 

 
    var old = $.fn.affix 
 

 
    $.fn.affix    = Plugin 
 
    $.fn.affix.Constructor = Affix 
 

 

 
    // AFFIX NO CONFLICT 
 
    // ================= 
 

 
    $.fn.affix.noConflict = function() { 
 
    $.fn.affix = old 
 
    return this 
 
    } 
 

 

 
    // AFFIX DATA-API 
 
    // ============== 
 

 
    $(window).on('load', function() { 
 
    $('[data-spy="affix"]').each(function() { 
 
     var $spy = $(this) 
 
     var data = $spy.data() 
 

 
     data.offset = data.offset || {} 
 

 
     if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom 
 
     if (data.offsetTop != null) data.offset.top = data.offsetTop 
 

 
     Plugin.call($spy, data) 
 
    }) 
 
    }) 
 

 
}(jQuery); 
 
    
 
     </script> 
 
     <script> 
 
     $('[data-spy="affix"]').on('affixed.bs.affix', function() { 
 
      // from http://stackoverflow.com/questions/6551429/adjust-a-width-based-on-parent-w-jquery 
 
      $(".affix").css("width",$(".affix").parent().css("width").replace('px','') - 30); 
 
     }) 
 
     </script> 
 
    
 
    </body> 
 
</html>

来源

2016-05-20 23:57:23

尼斯@Bass。你会继续支持吗？ https://github.com/bassjobsen/affix – ZimSystem

它与jquery协同工作，但没有在jquery插件中列出。相反，它是包含在引导3.

https://github.com/twbs/bootstrap/releases

来源

2016-04-28 10:37:03 clankill3r

作为单独的插件附件

回答

相关问题