I started with modifing the header on my site, and have a hard time to make it worked as i wanted.

I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this [site](https://anvilnode.com/).

I found this JS:

```
$(function(){
$('#header_nav').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0) {
    if($('#header_nav').data('size') == 'big') {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else {
if($('#header_nav').data('size') == 'small') {
    $('#header_nav').data('size','big');
    $('#header_nav').stop().animate({
        height:'100px'
    },600);
}  
}});

```

what i inserted into custom JS plugin in [my WP site](http://deilbeatz.com/).

Also have this JS:

```
 <script>
 $(window).on("scroll", function() {
 if ($(this).scrollTop() > 100) {
   $("header").css("background","#252525");
 }
 else {
   $("header").css("background","#fff");
}
});
</script>

```

Is maybe this better sollution, then previous code?

How to use this JS to make the effect on demo site i posted before in this post?