トップイメージの下に配置されたヘッダーを自動/非表示にする必要があります。

Question

この自動/非表示ヘッダーは、トップイメージの下の絶対位置に配置されています。

.header-sticky { 
     margin: -30px 0px 0px; 
     padding: 0px 55px; 
     background: #fff; 
     position: absolute; 
     z-index:9; 
     width: 52.4%; 
     right: 0; 
     height: 100px; 
     overflow: hidden; 
    } 

今のところは、オフセット設定でオート/非表示機能を活性化するが、私は、ヘッダーがドキュメントの先頭に達したときに、これを有効にしたいと思います。

どうすればいいですか？ここで

はフィドルです：https://jsfiddle.net/dp174zjx/1/

問題は、ヘッダーがトップに到達したとき、私は起動し、次のクラスに必要があるということです。

.header-sticky--hidden { 
    -webkit-transform: translateY(-100%) !important; 
    -ms-transform: translateY(-100%) !important; 
    transform: translateY(-100%) !important; 
    } 

    .header-sticky--narrow { 
    position: fixed; 
    z-index:9; 
    top: 0px; 

    } 

Answer 1

それはこの

$(window).scroll(function() { 
    var offset = $('.header-sticky').offset().top; 
    if ($(window).scrollTop() >= offset) { 
     //Hide the header 
    } 
});