让 div 在滚动时保持粘性答案

【问题标题】：Make div sticky on scroll让 div 在滚动时保持粘性
【发布时间】：2018-06-10 15:51:48
【问题描述】：

如何在滚动条上粘贴 div

看我的截图：

此屏幕截图如果粘在顶部：

而且这个屏幕截图会在滚动条上粘贴：

我的意思是这样，如果粘到顶部 div 恢复正常（我的意思是没有 css 粘）

看到这个屏幕截图，我想要这样，如果 div 棒回到正常状态（没有 css 粘性）：

这是我的贴：

    @media screen and (min-width: 768px) {
    .sticky {
        position: fixed;
        z-index: 9999;
        display: block;
        background-color: #2069e8;
        width: 100%;
        padding: 10px;
        margin-top: -10px;
        padding-top:10px
    }
    }

    <div class="sticky">            
    <div class="col-sm-2">
    <h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></h2>
    </div>
    </div>

请帮忙

感谢之前

【问题讨论】：

你的问题是什么，因为它非常适合我
stackoverflow.com/questions/17893771/…
您好先生，感谢您的回复，我的问题是如果粘到顶部，粘回到正常我的意思是没有粘性 css
您好，先生，我刚刚在上面添加了一个屏幕截图，以方便您使用。你能帮我吗，谢谢

标签： html css

【解决方案1】：

最简单的解决方案是让您的 div 始终保持粘性，但增加其下方 div 的 padding-top 以确保内容不会进入粘性 div 下方。

这样可以避免：

通过将页面内容移动到底部。

演示：https://jsfiddle.net/g9nhq3up/

【讨论】：

您好，谢谢您的回复，我刚刚在上面添加了一个新的屏幕截图，您能帮帮我吗。
@user3075428 我相信我的解决方案有效。我添加了一个演示给你看。

【解决方案2】：

您必须将padding-top: 设置为内容（而不是导航）
参见代码：(JSFiddle:https://jsfiddle.net/0fp1qsw3/)

 .sticky {
        position: fixed;
        z-index: 9999;
        display: block;
        background-color: #2069e8;
        width: 100%;
        padding: 10px;
        margin-top: 15px;
        padding-top:10px
    }

.content{
  padding-top: 50px;
}

    <div class="sticky">            
    <div class="col-sm-2">
    <h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></h2>
    </div>
    </div>
    <div class="content">
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
    </div>

【讨论】：