html - 如何修复标题上方的内容，以便标题上方的内容在滚动时保持隐藏

Question

请引用这个 fiddle http://jsfiddle.net/v7gf7/2/

我希望当滚动页面时，标题上方的内容(绿色背景)不应该是可见的。

这是我给出的 html:

<div class="main-container clearfix">
    <div class="dummy">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit nam  amet, consectetur adipisicing elit. Soluta, quibusdam modi magni ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, at, ipsa, harum vitae dignissimos veniam veritatis consectetur aperiam accusamus quisquam libero alias ipsam recusandae dolorum dolorem id porro tempora sapiente?consequatur quos nesciunt mollitia nam odit impedit id consectetur vel.
    </div>
    <div class="table clearfix">
        <div class="row header">
            Header
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>
        <div class="row">
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
            <div class="cell">Name</div>
        </div>

    </div>
 </div>

Answer 1

如果标题前不需要 lorem ipsum，那么您可以简单地在标题上方添加一个纯白色 block 并将其粘贴。 http://jsfiddle.net/v7gf7/4/

如果需要 lorem ipsum，那么我可能会制作一个白色 block 并将其隐藏在标题下方的内容框中。然后使用 https://github.com/davist11/jQuery-Stickem 使其在滚动时激活，example here .