Html 如何修复标题上方的内容，使标题上方的内容在滚动时保持隐藏

请看这把小提琴

我想，当一个滚动页面的内容，去上面的标题（绿色背景） 不应该是可见的

这是我的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>

Lorem ipsum dolor sit amet，奉献精英。nam amet代表，尊敬的精英。解决方案，是合理的、合理的、合理的。Rem、at、ipsa、VITATE VITANSIMOS VITANSIMOS VINAM VERITIAMS CONCETETUR aperiam accusamus QUISQUA M LIBRO别名ipsam RECURSANDAE dolorum dolorem id porro tempora sapiente？mollitia nam odit INDIT DISCONCETETUR id VELITETUR vel。
标题
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称

如果在标题前不需要lorem ipsum，那么您只需在标题上方添加一个纯白色块并粘贴即可

---

如果需要lorem ipsum，那么我可能会制作一个白色块，并将其隐藏在标题下的内容框中。然后使用

https://github.com/davist11/jQuery-Stickem

要使它在scroll上变为活动状态，

正如我所知，您必须使用

javascript

来控制scroll事件。javascript选项始终存在。但是如果有任何css方法来实现它，那就太好了。