Bootstrap 贴不动

Question

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

这是我 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

您只需在您的 ID 中添加一个 position:fixed #navigation

HTML

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

CSS

div#navigation {
    text-align: right;
    padding-top: 10px;
    position: fixed;
}

演示

https://jsfiddle.net/tbejd5en/2/

Answer 2

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

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

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

Bootstrap 贴不动

Bootstrap Affix Not Moving

html

javascript

css

twitter-bootstrap

affix