Background colour or image change with JS script-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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.