我想创建一个主页，您首先会在浏览器底部看到一个带有实际导航栏的图像。当您向下滚动时，当导航到达浏览器顶部时，它应该停留在顶部。
我找到的所有示例都适用于 <h>和 <p>标签，但只要我插入 <img>标题会在到达浏览器顶部之前跳到顶部。
我的示例代码 <img>从 w3c 插入的标签:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial;
}
.top-container {
background-color: #f1f1f1;
padding: 0px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
</style>
</head>
<body>
<div class="top-container">
<img src="data:image/jpeg;base64,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"
width="100%" />
</div>
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
<div class="content">
<h3>On Scroll Sticky Header</h3>
<p>The header will stick to the top when you reach its scroll position.</p>
<p>Scroll back up to remove the sticky effect.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>有时代码在浏览器内部运行良好，就像 stackoverflow 上的此处一样，但一旦您更改浏览器的宽度，它就会再次出现错误。
我希望所有给定的信息足以让有人帮助我。 我已经很感谢任何帮助。
/////////////// 编辑: ///////////////
由于 Ballsigno 解决了我的问题，另一个问题出现了: 我在屏幕左侧有 1 个 Logo ，在右侧有导航。导航栏应该有一个横跨屏幕的背景，并且 Logo 应该与它重叠。当我向下滚动时，我首先希望 Logo (例如 250 像素高)贴在顶部，然后当我进一步向下滚动时，我希望导航 + 背景(大约 100 像素)也贴在顶部。 我也不知道为什么会产生空白。在第一张和第二张图片之间应该只有大约 100px(灰色栏(导航栏)的高度。 使用此代码，除背景栏外的所有内容都有效..
示例 HTML:
@charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button"><a href="pages/uber_uns.html">Über uns</a></li>
<li class="button"><a href="pages/kontakt.html">Kontakt</a></li>
<li class="button"><a href="pages/preise.html">Preise</a></li>
<li class="button"><a href="pages/blog.html">Blog</a></li>
<li class="button"><a href="pages/galerie.html">Galerie</a></li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>我希望一切都可以理解，并且有人可以帮助我。 感谢您的宝贵时间!
最佳答案
如果我是对的，您不需要使用 JavaScript 来实现。 只设置 position: sticky 到你的标题类怎么样？ (这样就不用担心位置问题了。)
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
position: sticky;
top:0;
}
关于javascript - 图片问题下的 HTML5/CSS Sticky Header，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51470163/