在元素滾動而不是窗口位置上淡入div

Question

我的標題根據滾動位置逐漸消失，但是我想將淡出效果附加到用戶滾動到粘性導航欄上時，以產生更好的效果。

我嘗試了以下方法，但是沒有運氣！

<script>
     $(".l-subheader.at_bottom").scroll(function() {
     $(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
     });
</script>

應該很簡單但是我是JS新手！

http://scottdavy.co.uk/our-care-plans/ http://scottdavy.co.uk/our-pricing/

謝謝你的幫助。

Answer 1

檢查標題是否變為position:fixed; 然后應用淡入淡出效果。

<script>
     $(".l-subheader.at_bottom").scroll(function() {
        if( $(this).css('position') == 'fixed' )
        {
           $(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
        }

     });
</script>

Answer 2

嘗試以下演示...平滑滾動標題和子標題

https://jsfiddle.net/pratikgavas/D3DDp/38/

JS代碼：-

$(window).on("scroll", function(e) {
 if ($(window).scrollTop() >= $("#Header").height()) {
 $("#Header").fadeOut(500);
 $("#SubHeader").css('top','0px');
  }else {
    $("#Header").fadeIn(500);
 $("#SubHeader").css('top','100px');
}

}）;