Bootstrap 3 + Sticky-kit

Question

我一直在使用Bootstrap 3进行新项目，到目前为止它还很棒。

我得到的唯一问题是，当向下滚动时，我需要让几个面板粘在浏览器的顶部。

我正在尝试使用Sticky-kit，但它不适合我。

HTML

<div class="row" data-sticky_parent>
   <div class="col-sm-5" data-sticky_column>content 1...<div>
   <div class="col-sm-7">content 2...<div>
</div>

使用Javascript

$(".col-sm-5").stick_in_parent();
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.sticky-kit.min.js"></script>

有谁知道脚本为什么不起作用？

干杯，

Thales Ribeiro

Answer 1

在Bootstrap 3中，您可以使用内置的Affix插件（http://getbootstrap.com/javascript/#affix）来粘贴您想要的任何内容。

这里有一个例子http://bootply.com/103035。

你必须告诉js你要坚持哪个div（例如：#alert）和页脚div（例如：#footer）。

    $( document ).ready(function() {
     $('#alert').affix({
       offset: {
        top: 100
        , bottom: function () {
        return (this.bottom = $('#footer').outerHeight(true))
       }
      }
     })  
    });

并创建一个自定义的CSS到.affix，这是div被粘贴的状态。