Question

如何在滚动上粘贴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>

请帮助

之前谢谢

Answer 1

最简单的解决方案是让你的div始终保持粘性，但增加低于它的div的padding-top，以确保内容无法在粘性div下进行。

这样可以避免这种情况：

将页面内容移至底部。

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

Answer 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>

滚动时使div粘

2 个答案: