javascript - 图片问题下的 HTML5/CSS Sticky Header
问题描述
我想创建一个主页，您首先会在浏览器底部看到带有实际导航栏的图像。当您向下滚动时，导航应该在到达浏览器顶部时粘在顶部。
我发现的所有示例都可以使用<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 个徽标，右侧有导航。导航应该有一个背景作为屏幕上的条，并且徽标应该与此重叠。当我向下滚动时，我首先希望徽标（例如 250 像素高）贴在顶部，然后当我进一步向下滚动时，我希望导航 + 背景（大约 100 像素）也贴在顶部。我也不知道为什么会产生空白。在第一张和第二张图片之间，应该只有大约 100 像素（灰色条（导航栏）的高度。使用此代码，除了背景栏之外的所有内容都可以工作..
示例 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 来实现。仅设置位置如何：粘在您的标题类上？（这样就不用担心位置问题了。）
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
position: sticky;
top:0;
}
推荐阅读
- java - 如何从 AJAX 日期选择器中选择日期
- sql - oracle数据库中查询结果的列如何划分
- javascript - 如何在不插入数据库的情况下将 jsp 表单（注册）中的数据发送到另一个 jsp 页面（管理面板）
- x86-64 - AMD 架构上是否有与 Intel 的 MSR_SMI_COUNT 等效的寄存器？
- shell - 如何删除其中的管道符号和字符并修剪 ms 并以逗号分隔显示
- windows - 在powershell windows 8中搜索具有双引号的字符串
- c++ - 特征矩阵乘法比原始 SSE 慢
- jenkins - 如何在 Windows 机器上的詹金斯管道脚本中执行 shell 命令
- python - python代码获取每行文件的前两个字段
- javascript - 自定义元素执行顺序