4

Lo que deseo es que al mover el scroll, cambie el color de un div.

cambie de blanco a transparente

<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" >
0

3 respuestas 3

2

En este caso debes detectar el movimiento del panel para realizar el cambio del color en el contenido, una opción es la que sugiere @MaximilllianLaumesiter en su respuesta en SOen. Detecta un movimiento mayor a 200 px cambia el color del div a color transparente, cuando es menor a 200px cambia a color blanco.

En este ejemplo cambia de color blanco a negro, para cambiar a transparente simplemente define el color transparent en lugar de 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>

2
  • El OP, no ha pedido algo así, sino simplemente al hacer scroll
    – ESCM
    Commented el 21 nov. 2017 a las 19:52
  • No entiendo el comentario, ¿no ha pedido hacer que, se mas especifico?, al mover el contenido, cambia de color.
    – Jorgesys
    Commented el 21 nov. 2017 a las 20:43
2

Espero te sirva el siguiente ejemplo:

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'
        });
    }
});
});

estilo.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;
}

Es una manera sencilla de hacer el cambio de color del div

4
  • El OP nunca pidió que sólo fuera cuando el scroll no estuviera en 0
    – ESCM
    Commented el 21 nov. 2017 a las 22:32
  • El punto es que la pregunta tenga una idea para lo que lo quiera aplicar, ya sea que en cierta altura haga algo o simplemente puede quitar la comparación, y solamente escuchar el evento .scroll(). Ya esta en @Asher si la acepta o no, saludos. Commented el 21 nov. 2017 a las 22:43
  • Te lo digo por experiencia, cuando a mi me respondian algo y recién estaba empezando en javascript, no entendía porque hacian ciertas cosas, y aveces aquellas cosas eran anexa a la solución, el podría decir, ¿Porque el scroll en 0 ? Hará algo especial ? Piensalo desde alguien que recién empieza
    – ESCM
    Commented el 22 nov. 2017 a las 12:33
  • Lo entiendo, pero también se que desde varias perspectivas se puede llegar a algo mucho mejor, muchas respuestas diferentes te ayudan a visualizar las cosas desde otro angulo, eso lo se por experiencia, lo importante es aportar algo a los demas, saludos. Commented el 22 nov. 2017 a las 17:23
0

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>

4
  • El OP ha pedido que cambie de color de blanco a transparente al mover el scroll. No cambia a los colores comentados y si mueves el scroll, el contenido no cambia de color.
    – Jorgesys
    Commented el 21 nov. 2017 a las 20:44
  • Si cambia el color al mover el scroll, además nunca pidió con una determinada cantidad de pixeles, y ya ha sido modificado el color a blanco.
    – ESCM
    Commented el 21 nov. 2017 a las 20:58
  • Es un ejemplo, por ejemplo yo preguntaría para que crear un bucle para agregar br ? : for(var i = 0; i<50; i++) { . Veo que ya cambiaste el color al menos
    – Jorgesys
    Commented el 21 nov. 2017 a las 21:07
  • En el mismo código expliqué el motivo, deberías leer supongo.
    – ESCM
    Commented el 21 nov. 2017 a las 21:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.