我在網站上作業了一段時間，遇到了粘性標題的問題。當您向下滾動時，它會卡在英雄影像的底部，我完全不知道它為什么會這樣做 這是實際問題（不是促銷）。感謝所有幫助，并為一長串代碼感到抱歉。
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");
}
}* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
@font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: sticky;
z-index: 1;
text-align: center;
}
.sticky .content {
padding-top: 102px;
}<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<a href="about.html" class="button"><button class="button5">About</button></a>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<a href="menu.html" class="button"><button class="button5">Menu</button></a>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<a href="contact.html" class="button"><button class="button5">Contact</button></a>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>uj5u.com熱心網友回復：
我檢查了您的代碼，我認為因為您有兩個沖突的類，所以 .header 類是 position:sticky 并且 .sticky 類是固定的，您可以嘗試洗掉標題上的粘性位置，讓 .sticky 像下面這樣固定. 讓我知道這是否可行。
header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed;
z-index: 1;
text-align: center;
top: 0;
right: 0;
left: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}<div class="header sticky" id="myHeader">
<img src="Images/charmlogoTrans.png" width="100px" height="100px">
</div>uj5u.com熱心網友回復：
您應該使用 positionfixed而不是sticky. 除此之外，您還需要將寬度設定為 100%。
通過這些更改，您無需使用 Javascript 來處理標題位置
* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
@font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed; /* `sticky` to `fixed` */
width: 100%; /* set the width 100% */
z-index: 1;
text-align: center;
}<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<a href="about.html" class="button"><button class="button5">About</button></a>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<a href="menu.html" class="button"><button class="button5">Menu</button></a>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<a href="contact.html" class="button"><button class="button5">Contact</button></a>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/465297.html
標籤：javascript html css