ฉันต้องการสร้างหน้าแรกที่คุณเห็นรูปภาพในตอนแรกพร้อมกับแถบนำทางจริงที่ด้านล่างของเบราว์เซอร์ เมื่อคุณเลื่อนลง การนำทางควรติดอยู่ด้านบนเมื่อไปถึงด้านบนของเบราว์เซอร์
ตัวอย่างทั้งหมดที่ฉันพบใช้งานได้กับแท็ก <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 อันทางด้านซ้ายของหน้าจอและการนำทางทางด้านขวา การนำทางควรมีพื้นหลังเป็นแถบพาดผ่านหน้าจอ และโลโก้ควรทับซ้อนกัน เมื่อฉันเลื่อนลง อันดับแรกฉันต้องการให้โลโก้ (เช่น สูง 250px) ติดอยู่ด้านบน จากนั้นเมื่อฉันเลื่อนลงต่อไป ฉันต้องการให้การนำทาง + พื้นหลัง (ประมาณ 100px) ติดอยู่ด้านบนด้วย ฉันไม่รู้ว่าทำไมพื้นที่สีขาวจึงถูกสร้างขึ้นเช่นกัน ระหว่างรูปภาพแรกและรูปภาพที่สองควรมีขนาดประมาณ 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="/thpics/favicon.ico" />
<link rel="stylesheet" href="/thstyles/basics.css" type="text/css" />
<link rel="stylesheet" href="/thstyles/index.css" type="text/css" />
<link rel="stylesheet" href="/thstyles/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="/thpages/uber_uns.html">Über uns</a></li>
<li class="button"><a href="/thpages/kontakt.html">Kontakt</a></li>
<li class="button"><a href="/thpages/preise.html">Preise</a></li>
<li class="button"><a href="/thpages/blog.html">Blog</a></li>
<li class="button"><a href="/thpages/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>ฉันหวังว่าทุกอย่างจะเข้าใจและมีคนสามารถช่วยฉันได้ ขอขอบคุณสำหรับเวลาของคุณ!
