javascript - 如何在响应宽度 div 中创建粘性标题？

Question

我在边栏中有两个具有响应宽度的“框”。我需要标题是粘性的，内容是可滚动的。如果我尝试在标题上使用 position:fixed ，我会遇到它们失去响应宽度/背景颜色的问题。

这是其中一个框的 jsfiddle:http://jsfiddle.net/4tadzk7x/

HTML:

<aside class="sidebar col-xs-3 pull-right">
    <div class="box-with-header queries">
        <div class="header-fixed">
            <h5 class="headline">Headline</h5>
        </div>
        <div class="content">
            <ul class="item no-bullets red">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets blue">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets yellow">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />
        </div>
    </div>
</aside>

Answer 1

添加这两个类:

.header-fixed{
    position:fixed;
    width:100%;
}

.content{
    padding-top:45px;
}

Check JSFiddle Demo

更新:

如果宽度并不总是 100%，那么您可以简单地移动 header div 并像这样修改您的 HTML 代码:

<aside class="sidebar col-xs-3 pull-right">
    <div class="header-fixed">
        <h5 class="headline">Headline</h5>
    </div>
    <div class="box-with-header queries">
        <div class="content">
            //content ...
        </div>
    </div>
</aside>

Check JSFiddle Demo