图片问题下的HTML5 / CSS粘性标头

时间：2018-07-22 23:55:40

标签： javascript html css header sticky

我想创建一个主页，首先在其中看到图像，而实际的导航栏位于浏览器底部。向下滚动时，导航应在到达浏览器顶部时停留在顶部。

我发现的所有示例都适用于<h>和<p>标签，但是一旦我插入<img>，标题就会跳到顶部，然后到达浏览器顶部

从w3c插入我的<img>标签的示例代码：

<!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个徽标，右侧显示导航。导航的背景应为横条，并在屏幕上与徽标重叠。当我向下滚动时，我首先希望徽标（例如250px高）粘贴在顶部，然后当我进一步向下滚动时，我希望导航+背景（大约100px）也粘贴在顶部。 我也不知道为什么也会产生空白。在第一张图片和第二张图片之间，该图片应该仅约为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>

我希望一切都是可以理解的，有人可以帮助我。 谢谢您的时间！

1 个答案:

答案 0 :(得分：1)

如果我是对的，则不需要使用JavaScript来实现。 仅仅设置位置：粘在标题类上怎么样？ （通过这种方式，您不必担心职位问题。）

.header {
    padding: 10px 16px;
    background: #555;
    color: #f1f1f1;
    position: sticky;
    top:0;
}
相关问题
最新问题