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

Question

请参阅此小提琴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，那么你可以简单地在标题上方添加一个纯白色块并粘贴它。 http://jsfiddle.net/v7gf7/4/

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