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

您只需在身份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中添加#navigation-affix，然后将col-xs-offset-2添加到您的身份#content-wrapper

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

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

Bootstrap词缀不动

2 个答案: