Background colour or image change with JS script
Question
All, I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
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>
3 answers
solution1
0 2021-10-15 14:39:17
You should change the background-color in css and also name the class in jquery proper:
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>
solution2
0 2021-10-15 15:51:50
You just need to measure the height of your banner in order to know where you need to switch the color:
$(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>
solution3
-1 2021-10-15 14:12:03
Use a native javascript in your html code :
<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>
and in your 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');
}
}
I hope this answer will help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Use JS to change background colour
Change Background Colour per level (js game)
changing colour of a background image with js on the fly
Linking background colour change [css] to background image change [javascript]
change background colour onclick
Making background colour change
Javascript Background Change Colour
js background colour transition
change background-colour of clicked button in react:js
Change background colour, add a pointlight in three.js
Related Tags