所有，我想要一個 JS 腳本，當您向下滾動網站的標題（“橫幅”）時，它會獲得另一種顏色。（從透明變為有色）。（將來我希望它從一個影像更改為另一個影像..）。
我從這個網站添加了一個 JS 腳本，但它還不起作用。我想我需要知道滾動條需要使用哪個 div。
有人可以幫忙嗎？
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
@import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
您應該更改 css 中的背景顏色，并在 jquery 中正確命名該類：
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});@import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
uj5u.com熱心網友回復：
您只需要測量橫幅的高度即可知道需要切換顏色的位置：
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>uj5u.com熱心網友回復：
在您的 html 代碼中使用原生 javascript：
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
并在您的 javascript 中
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
我希望這個答案對你有幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317263.html
標籤：javascript html 查询 css