Change color of a div when moving the scroll

Question

Change color of a div when moving the scroll

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

3

What I want is that when you move the scroll, change the color of a div.

change from white to transparent

<div style="position : fixed;width : 100%;margin-top:-20px; background-color: white;height: 80px; " data-collapse="all" data-animation="over-left" data-duration="400" class="navbar w-nav  color_barra" >

javascript css3 css

asked by Angel 21.11.2017 в 18:56

source

3 answers

Change href of multiple labels to with document.getElementsByClassName Populate data a datatable from a JSON

score 1 · Answer 1

In this case you must detect the movement of the panel to change the color of the content, an option is suggested by @MaximilllianLaumesiter on your answer on SOen. Detects a movement greater than 200 px changes the color of the div to transparent color, when it is less than 200px it changes to white color.

In this example it changes from white to black, to change to transparent simply define the color transparent instead of black :

$(document).ready(function () {
    var scroll_pos = 0;
    $("#left-panel").scroll(function () {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos > 200) {
            $("#left-panel").css('background-color', 'transparent'); //*Transparente
        } else {
            $("#left-panel").css('background-color', 'white'); //*blanco
        }          
    });
});

#left-panel {       
    background-color: gray;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;        
    height: 80px;
    z-index: 2;
    overflow:auto;       
    height:2000px;      
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="left-panel">
    <div style="height:5000px;">Contenido div</div>
</div>

score 1 · Answer 2

I hope you can use the following example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poscion Scroll</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div class="posicion"><h1>Posicion: <small id="posicion"></small></h1></div>
<div id="div1">
    <h1 id="h1-1">Div 1</h1>
</div>
<div id="div2">
    <h1 id="h1-2">Div 2</h1>
</div>
<div id="div3">
    <h1 id="h1-3">Div 3</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>

scroll.js jquery

$(document).ready(function() {
var scroll = $(window).scrollTop();
$('#posicion').text(scroll);
$(window).scroll(function(event) {
    var scroll = $(window).scrollTop();
    $('#posicion').text(scroll);
    /*Cambia el color del div cuando es distinto a 0*/
    if(scroll!=0){
        $('#div1').css({
            background: '#fff'
        });
    }else{
        $('#div1').css({
            background: '#066DFA'
        });
    }
});
});

style.css

html,body{
margin: 0;
width: 100%;
height: 100%;
}
div{
position: static;
width: 100%;
height: 100%;
}
h1{
margin:0;
}
#div1{
background-color: #066DFA;
}
#div2{
background-color: #FBF806;
}
#div3{
background-color: #FE2704;
}
.posicion{
position: fixed;
width: 100%;
height: 5%;
background-color: #FB0606;
text-align: center;
color: #fff;
}

It's a simple way to change the color of the div

score 0 · Answer 3

window.addEventListener("DOMContentLoaded" , () => {
var d = document.getElementById("m");
document.addEventListener("scroll", () => {
d.setAttribute("style","background-color: rgba(255,255,255,0.1)");
});
});

for(var i = 0; i<50; i++) { // Es solo para rellenar el body y tener la barra para hacer scroll, NO TOMAR EN CUENTA.
 document.body.appendChild(document.createElement("br"));
}

#m {background-color: white; width: 200px; height: 200px;}
body {background-color: gray;}

<div id=m></div>