Twitter-bootstrap“affix”没有加贴

Question

在实现搜索功能时，我将返回动态生成的html以响应ajax请求并将HTML插入到div中。动态HTML的一部分是一个“导航窗格”，我想使用bootstrap（“#affixcontainer”div）进行粘贴。但是，导航窗格拒绝粘贴。

<div class="hidden-xs col-xs-3">
    <div id="affixcontainer" data-spy="affix" data-offset-top="120" data-offset-bottom="10">
        <div class="panel panel-primary">
            <div class="panel-heading">SEARCH RESULTS</div>
            <div class="panel-body" style="padding:0;margin:0">
                <nav id="scroll-nav" class="bs-docs-sidebar hidden-print hidden-xs" role="navigation"> 
                    <ul class="nav nav-pills nav-stacked bs-docs-sidenav"> 
                        <li><a href="#top"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>Top</a></li>
                        <li>Category 1</li>
                        <li>Category 2</li>
                        <li>Category 3</li>
                        <li>Category 4</li>
                        <li>Category 5</li>
                    </ul>
                </nav>
            </div>  
        </div>
    </div>
</div>
<div class="col-xs-9">
    SEARCH LISTINGS
</div>

我还尝试使用javascript进行粘贴（另外，请参阅下面的代码剪辑），但这似乎也不起作用。该脚本位于动态生成的HTMl的底部。我究竟做错了什么？

$(document).ready(function(){
    $("#affixcontainer").affix({
        offset: {
            top: 120,
            bottom: 20
        }
    });
});