淡出div元素滚动不窗口位置

我有根据滚动位置淡出的标题，但是我想附加到淡出当用户滚动到粘滞导航栏创建更好的效果。淡出div元素滚动不窗口位置

我试过以下，但没有运气！

<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/

感谢您的帮助。

来源

2016-03-11 Joby Kent

我认为，你应该检查值不小于零。 –

检查标题是否变为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>

来源

2016-03-11 03:13:12 rmondesilva

嘿，谢谢你的时间。我试过你的代码，但它没有工作？ –

我的不好。有一些错别字。现在再试一次。 '如果（$（this）.css（'position'）=='fixed'）' – rmondesilva

任何想法为什么这不起作用？ –

试试下面的演示...平滑滚动头&副标题

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

}）;

来源

2016-03-11 05:58:29

实现了这一点，但效果需要与滚动相关，而不仅仅是在滚动到元素时激活淡出，它必须是两者都有。 –

淡出div元素滚动不窗口位置

回答

相关问题