Change menu color in page scroll

Question

How do I change the color of a menu by scrolling the page?

I’m doing like this

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

And it’s not working, someone can help?

#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;
}

Answer 1

I don’t see any problems with your function. You should probably be overwriting some functionality. If this is the case you should "treat" what you want.

Using your function, and assigning any configuration to your classes, we have your code working.

$(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 that if we remove the statement !Important css, div color will not be changed.

Answer 2

The code is correct, you need to add the styles to this class .teste2, or add jQuery library:

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

I made an example here with your code and it works perfectly.

$(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>