Question

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

我已经创建了起始模板jsfiddle

我想要的效果： mockup

当前糟糕的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

Answer 2

这里的技巧是在.scrollable上使用overflow:auto并将其包装在某个容器中，其overflow: hidden和大小小于.scrollable的大小。这将使.scrollable的内容为... scrollable =），并且不会看到滚动条。

在这个方法中，我们不动画根html | body，而是内容块本身，并向其添加position:relative，以便每次滚动div时其内容的位置属性都不会乱。 / p>

The fiddle

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

2 个答案: