javascript - Bootstrap 词缀不动

Question

我试图通过 Bootstrap 的 Affix 插件使我网站上的导航侧边栏随着浏览器 View 向下移动，但它拒绝跟随 View 并且只是停留在顶部。

这是我的 HTML 结构:

<div id="page-wrapper">
    <div class="container">
            <div class="row">
                <div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
                    <div class="col-xs-2" id="navigation-wrapper">
                        <div class="inner">
                            <div class="row">
                                <div class="col-xs-12">
                                    <img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div id="navigation">
                                        <a href="/" id="current-page">Home</a>
                                        <a href="/portfolio">Portfolio</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-10" id="content-wrapper">
                    <div class="inner">

                    </div>
                </div>
            </div>
        </div>
        <div id="page-push"></div>
    </div>
    <footer>
        <div class="container">

        </div>
    </footer>

来源:https://jsfiddle.net/tbejd5en/1/

有什么想法吗？

Answer 1

您只需将 position:fixed 添加到您的 id #navigation-affix 并将 col-xs-offset-2 添加到您的id #content-wrapper

div#navigation-affix {
    position: fixed !important;
}

这是 fiddle :https://jsfiddle.net/tbejd5en/5/