我正尝试使用新位置“粘性”来做导航栏,并且我做了粘性的定义以避免safari的问题,但是我遇到了另一个问题,我发现页面和导航栏的边界之间有这样的空间
还有我的CSS代码
.nav-heder {
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0;
background-color: #f5f5f5;
z-index: 5;
height: 60px;
padding: 15px 0px 10px 0px;
}
.margin-bottom-sm { margin-bottom: 1em; }
.container{
/* padding-top: 20px; */
}
这是html cose
<div class="container">
<!-- header ,tools.back to ,title of page -->
<div class="row margin-bottom-sm nav-heder">
<div class="col-lg-3 col-md-3 col-xs-3 "><a href="#" class="webviewClose"><img src="./assets/images/arrow-left.png" srcset="./assets/images/arrow-left@3x.png 1000w"></a></div>
<div class="col-lg-6 col-md-6 col-xs-6 text-md bold text-center"> Your Prizes </div>
<div class="col-lg-3 col-md-3 col-xs-3 text-right bold"><div class="col-lg-3 col-md-3 col-xs-3 text-right bold"><a href="#" id="address-book"><img src="./assets/images/contactscopy2.png" srcset="./assets/images/contactscopy2@3x.png 1000w"></a></div></div>
</div>
<!-- content of page -->
<div class="content"></div>