javascript - html中的粘性图像占用标题中的空间
问题描述
我有一个粘性图像,我试图将其放在导航栏上方,粘性代码如下所示:
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 200px;
z-index: 1000;
}
<div>
<a href="index.html" rel="home" class="logo logo_image_only">
<img class="sticky" src="assets/img/logo_n.png" alt="">
</a>
</div>
.navbar-area {
position: absolute;
left: 0;
top: 50px;
width: 100%;
height: auto;
z-index: 999;
background-color: transparent;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navbar-area.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
-webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
background-color: #ffffff !important;
-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.navbar-area.is-sticky .zash-nav .navbar {
-webkit-box-shadow: unset;
box-shadow: unset;
padding-left: 0;
padding-right: 0;
}
.navbar-area.navbar-style-two {
top: 0;
padding-left: 40px;
padding-right: 40px;
}
.navbar-area.navbar-style-two .zash-nav {
background-color: transparent;
}
.navbar-area.navbar-style-two .zash-nav .navbar {
background-color: transparent;
-webkit-box-shadow: unset;
box-shadow: unset;
padding-right: 0;
padding-top: 0;
padding-left: 0;
padding-bottom: 0;
}
现在当我加载页面时,图像不正确,它占用空间并使我的导航栏出错,如下图所示:
解决方案
您只需要将图像的位置“粘”到“固定”,请参考下面的代码。
img.sticky {
position: fixed;
top: 0;
width: 200px;
z-index: 1000;
}
推荐阅读
- sql-server - Microsoft SQL Server 解析协议 (SSRP) - 如何指定数据库主机?
- python - 在字符串中交错“^”字符
- reactjs - 将 react-native-router-flux 与 DrawerNavigator 一起使用
- javascript - javascript: 协议与标准浏览器 JavaScript 有何不同?
- spring - 使用spring jpa findall进行复杂关系映射是最佳实践吗
- docker - Hyperledger Fabric 的 Kafka Brokers 无法建立连接
- json - WordPress REST AP - 根据与另一个自定义帖子类型的关系过滤自定义帖子类型的 json
- c++ - 使用 iostream 读取二进制文件的不同行为
- webpack - Webpack 4:如何使用 ExtractTextPlugin.extract()
- python - Tensorflow restore() 缺少 1 个必需的位置参数:'save_path'