在标题位置下向下滚动时淡出内容

Question

I tried to read alot about this on other questions but i cant seem have the perfect code for this.

My position fixed header has an scrollable effect with jquery. When you scroll down it show another background color.

But when i scroll down the content goes a little bit in the middle of the transition color of the header from white to black. So what i want to fix is that my content hides before(or at the same time in flow) the header background transition.

CSS:

#header {
    position:fixed;
    display:block;
    width:100%;
    overflow:hidden;
    top:0;
    left:0;
    padding-left:0vmax;
    padding-right:5vmax;
    z-index:99999;
    height:9vmax;
    max-height:9vmax;
     transition: 0.4s ease-in-out;
    box-sizing:border-box;

    }


#content{width:100%;height:auto;margin-top:14vmax;margin-bottom:0px;overflow:auto;z-index:0;position:relative;}

Tried this, but this code is intented to hide the header and not the content so it flickers with my code.

  var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    var up = false;
    var newscroll;
    mywindow.scroll(function () {
        newscroll = mywindow.scrollTop();
        if (newscroll > mypos && !up) {
            $('#content').stop().fadeOut();
            up = !up;
            console.log(up);
        } else if(newscroll < mypos && up) {
            $('#content').stop().fadeIn();
            up = !up;
        }
        mypos = newscroll;
    })

Answer 1

As I understand, you need to set background-color:#ffffff to the #header by default like

#header{
  background-color:#ffffff;
}

and then set background-color:dimgray when class is added like

#header.scrolled{
  background-color:dimgray;
}

Updated Fiddle ▸