Switch menu color on page scroll

Question

Switch menu color on page scroll

Navigation

#1 by (6 votes)
#2 by (2 votes)

2

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

I'm doing this

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

And it's not working, can anyone 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;
}

html jquery css

asked by anonymous 21.10.2015 / 13:58

2 answers

2

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

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

I'vemadeanexampleherewithyourcodeanditworksperfectly.

$(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><divclass="sidebar-wrapper">Random Stuff</div>

21.10.2015 / 14:09

Count of filtered dates per day in MySQL Check if there is a character within a text

score 6 · Accepted Answer

I do not see problems in their 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><divclass="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 from the css, the color of the div will not change.
/ p>