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

尝试以下演示... Smooth Scroll Header＆amp;子报头

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

}）;

在元素滚动时淡出div而不是窗口位置

2 个答案: