在標題位置下向下滾動時淡出內容

Question

我試圖在其他問題上閱讀很多有關此內容的信息，但我似乎對此沒有完美的代碼。

我的位置固定標頭對jquery具有可滾動的效果。 向下滾動時，它將顯示另一種背景顏色。

但是，當我向下滾動時，該內容在標題從白色到黑色的過渡顏色的中間變小了。 所以我要修復的是我的內容在標題背景轉換之前（或同時在流中）隱藏。

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

嘗試過此操作，但此代碼旨在隱藏標題而不是內容，因此它與我的代碼閃爍。

  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

據我了解，您需要默認將background-color:#ffffff設置為#header

#header{
  background-color:#ffffff;
}

然后在添加類時設置background-color:dimgray

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

更新的小提琴▸