javascript - 如何创建带有两个 div 的列，其中一个固定在第二个上方，滚动时隐藏在第一个后面？

Question

如何在响应式设计中创建与父列宽度相同的容器粘在导航栏上？单击第一个 div 中的链接时，内容 div 将滚动到正确的高度，以便内容隐藏在 hr 和链接 div 后面。所有这些都在一个专栏中。

我已经创建了起始模板 jsfiddle

我想要的效果:

当前错误的 HTML:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <form class="navbar-search pull-right">
                <input type="text" class="search-query" placeholder="Search" />
            </form>
        </div>
    </div>
</div>
<div class="container">
    <div class="content">
        <div class="row">
            <div class="span9">
                <div class="hidebehind">
                    <div class="push">
                        <div class="row">
                            <div class="well links">
                                <div class="span3">
                                    <ul>
                                        <li><a href="#scroll1" rel="" id="scroll2" class="scroll">scroll to 1</a>
                                        </li>
                                        <li><a href="#scroll2" rel="" id="scroll2" class="scroll">scroll to 2</a>
                                        </li>
                                        <li><a href="#scroll3" rel="" id="scroll3" class="scroll">scroll to 3</a>
                                        </li>
                                        <li><a href="#scroll4" rel="" id="scroll4" class="scroll">scroll to 4</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="span3">
                                    <ul>
                                        <li><a href="#scroll5" rel="" id="scroll5" class="scroll">scroll to 5</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                </div>
                <hr />
                <div class="row scrollable">
                    <div class="well">
                        <ul>
                            <li><a name="scroll1" id="scroll1to"><strong>1. Some text</strong></a>
                            </li>
                            <li><a name="scroll2" id="scroll2to"><strong>2. Some text</strong></a>
                            </li>
                            <li><a name="scroll3" id="scroll3to"><strong>3. Some text</strong></a>
                            </li>
                            <li><a name="scroll4" id="scroll4to"><strong>4. Some text</strong></a>
                            </li>
                            <li><a name="scroll5" id="scroll5to"><strong>5. Some text</strong></a>
                        </li></ul>
                    </div>
                </div>
            </div>
            <div class="span3">
                <div class="well">relative</div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="well">footer</div>
</div>

当前错误的 CSS:

.links {
    width:58%;
    position:fixed;
}
.hidebehind {
    position: fixed;
    width:58%;
}
.scrollable {
    margin-top:170px;
    overflow:auto;
}

Answer 1

已解决:

http://jsfiddle.net/smUx8/4/

您只需要一些position: fixed 和一个margin-top