Я хочу создать домашнюю страницу, на которой вы сначала видите изображение с фактической панелью навигации в нижней части браузера. Когда вы прокручиваете вниз, навигация должна оставаться вверху, когда достигает вершины браузера.
Все найденные мной примеры работают с тегами <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>Надеюсь, все понятно и мне кто-нибудь поможет. Спасибо за уделенное время!
