-1

Já tentei com esse código sem lograr exito.

$(document).ready(function(){
  $(document).scroll(function() {
    var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
    var channel = Math.round(alpha * 255);
    $(\"body\").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
  });
});

Meus códigos

CSS

header {
 background-color: #0683c9;
}

Elemento que quero mudar a cor header

 <header>
    <div id=\"logo\">
     ......
     ......
 </header>
1
  • 2
    Mas no seu código você está aplicando a cor ao body e não ao header
    – Leo Letto
    6/04/2017 às 11:34

2 Respostas 2

4

Tente dessa forma:

    window.onscroll = function (e) {  
      document.getElementById("header").style.backgroundColor = "red";
    } 
header {
     background-color: #0683c9;
     width:600px;
     height: 1200px;
    }
<header id="header">
    <div>
    </div>
 </header>

Tem esse exemplo funcionando nesse link: https://jsfiddle.net/Lm7j4tvr/

2
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão 6/04/2017 às 12:03
  • Editei a resposta.
    – Jessika
    6/04/2017 às 12:46
1

Como o @Leo Letto comentou, você está aplicando a cor ao body e não ao header, segue um exemplo funcional de seu código.

$(document).ready(function() {
  $(document).scroll(function() {
    var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
    var channel = Math.round(alpha * 255);
    $("header").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
  });
});
body {
  height: 800px;
  background-color: black;
}

header {
  background-color: #0683c9;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <header>
    <div id="logo"></div>

  </header>
</body>

1
  • eu tinha colocado header, no script, na hora de formular a pergunta colei errado. Mas foi de grande valia a sua resposta pois vi no seu exemplo que o script deve ser colocado após a tag. Valeu mesmo!!!
    – user60252
    6/04/2017 às 12:42

Você deve fazer log-in para responder a esta pergunta.