我有一个让我有些沮丧的问题。场景是:
我有两个div。顶部 div 是横幅(仅包含徽标)。底部 div 是导航栏,包含一些图标作为链接和下拉列表。
我想要以下两件事:
滚动时保持在页面顶部。
我可以独立实现上述两个目标,但不能同时实现。有没有办法实现这一目标?
CSS 和 HTML 的简化版本,具有粘性导航栏的版本,但渐变是每个 div,而不是从一个 div 开始并在另一个 div 中结束:
#banner,
.navbar {
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
padding: 5px 5px 5px 5px;
}
.navbar {
position: sticky;
top: 0;
}
.navbar li {
display: inline;
}
.container {
height: 1000px;
}
<div id="banner" class="Container-fluid">
<div class="banner-row">
<h1>Logo!</h1>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li><a href="/home/"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</div>
<div class="container body-content">
<h1>Content!</h1>
<p>Stuff to fill a space.</p>
</div>
相反:
header {
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
padding: 5px 5px 5px 5px;
}
.navbar {
position: sticky;
top: 0;
}
.navbar li {
display: inline;
}
.container {
height: 1000px;
}
<header>
<div id="banner" class="Container-fluid">
<div class="banner-row">
<h1>Logo!</h1>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li><a href="/home/"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</div>
</header>
<div class="container body-content">
<h1>Content!</h1>
<p>Stuff to fill a space.</p>
</div>
最佳答案
您可以考虑导航栏中的一个伪元素,您可以在其中应用渐变着色,然后将其从顶部溢出,使其覆盖横幅。您只需要根据您的风格调整最高值。
#banner {
padding: 5px 5px 5px 5px;
position:relative;
z-index:1;
}
.navbar {
position: sticky;
padding: 5px 5px 5px 5px;
top: 0;
}
.navbar:before {
content:"";
position:absolute;
z-index:-1;
left:0;
right:0;
bottom:0;
top:-100px;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.navbar li {
display: inline;
}
.container {
height: 1000px;
}
<div id="banner" class="Container-fluid">
<div class="banner-row">
<h1>Logo!</h1>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li><a href="/home/"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</div>
<div class="container body-content">
<h1>Content!</h1>
<p>Stuff to fill a space.</p>
</div>
关于HTML/CSS - 两个具有单一渐变背景但一个粘性元素的 div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52927818/