引导词缀不动答案

【问题标题】：Bootstrap Affix Not Moving引导词缀不动
【发布时间】：2016-07-19 12:04:10
【问题描述】：

我正在尝试通过 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/

有什么想法吗？

【问题讨论】：

你为什么不直接使用position: fixed？
将position:fixed 添加到您的ID #navigation-affix .. 看看这个... jsfiddle.net/tbejd5en/4
@MinalChauhan 导致这种情况发生：i.imgur.com/URF2FLN.png
您需要将偏移量 col-xs-offset-2 添加到您的 id `#content-wrapper` 中，如下所示：<div class="col-xs-offset-2 col-xs-10" id="content-wrapper">

标签： javascript html css twitter-bootstrap affix

【解决方案1】：

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

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

这里是小提琴：https://jsfiddle.net/tbejd5en/5/

【讨论】：

这可行，但它需要我硬编码侧边栏的大小，这很好。

【解决方案2】：

您只需将position:fixed 添加到您的ID #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/

【讨论】：

抱歉，我指的是整个侧边栏的导航。图像和所有。我似乎无法使用为整个侧边栏固定的位置来让它工作。
在bootstrap docs 中，他们通过使用引导列进行x 定位来实现这一点，内部元素得到position: fixed;。因此，使用列进行列布局，并创建一个内部 div 来包含您想要保持固定的所有内容。