3

Como faço para trocar a cor de um menu ao rolar a pagina?

Estou fazendo assim

$(function() {
  $(window).on("scroll", function() {
    if($(window).scrollTop() > 100) {
      $(".sidebar-wrapper").addClass("teste2");
    } else {
      $(".sidebar-wrapper").removeClass("teste2");
    }
  });
});

E Não está dando certo, alguém pode ajudar?

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-x: hidden;
    background: #195884;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.teste2{
    background: #FFF;
}
1
  • quais as definições de CSS para .sidebar-wrapper e .teste2? (adicione na pergunta) Commented 21/10/2015 às 12:03

2 Respostas 2

6

Não vejo problemas em sua função. Provavelmente você deve estar sobrescrever alguma funcionalidade. Se for esse o caso você deverá "tratar" o que deseja.

Utilizando sua função, e atribuindo qualquer configuração para suas classes, temos o seu código funcionando.

$(function() {
  $(window).on("scroll", function() {
    if($(window).scrollTop() > 100) {
      $(".sidebar-wrapper").addClass("teste2");
    } else {
      $(".sidebar-wrapper").removeClass("teste2");
    }
  });
});
.teste2{
    background: blue !important;
}

.sidebar-wrapper{
    background: red;
    position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-wrapper">
    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
    </p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Note, que se removermos a declaração !important do css, a cor da div não será alterada.

3

O código está correto, deve te faltar é adicionar os estilos para essa class .teste2, ou então adicionar a biblioteca jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Eu fiz aqui um exemplo com o teu código e funciona perfeitamente.

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 100) {
            $(".sidebar-wrapper").addClass("teste2");
        } else {
            $(".sidebar-wrapper").removeClass("teste2");
        }
    });
});
body{height:1000px;}

.sidebar-wrapper {
    background-color: #ddd;
    position: fixed;
    width: 100%;
}
.teste2 {background-color:royalblue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sidebar-wrapper">Random Stuff</div>

1
  • Já está adicionada a biblioteca, e o codigo css está tudo certo, se eu troco no inspecionar elemento funciona, mas com o jquery não estou conseguindo alterar... Commented 21/10/2015 às 12:15

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .