Jquery 导航栏背景在滚动时淡出，但在页面重新加载时不可见

我有一个带透明背景的全白色导航，当它经过一个标题div（通常包含一个用作背景的图像）时，背景采用黑色淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入。显然，如果重新加载的页面的状态低于页眉（每个客户端的正文都有白色背景），这就是一个问题。如果导航低于标题div，如何保持背景？谢谢你的洞察力

jQuery：

var scroll_start = 0;
var startchange = $('.nav-null');
var Heightofit = startchange.outerHeight()-100;
$(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
        $('nav').css('background-color', 'rgba(34,34,34,0.9)');
    } else {
        $('nav').css('background-color', 'transparent');
    }
});

CSS:

---

你能举一个完整的例子来说明这个问题吗？作为问题中的一个片段，“我有一个全白色的导航，背景是透明的”，它是白色的还是透明的？如果没有导航的HTML和完整的css，你需要几个小时才能找到解决方案。您应该创建一个JSFIDLE-基于用户Mohamed Yousef的小提琴。

nav {
position:fixed;
width:100%;
z-index:1000;
padding:0 32px;
padding: 0 2rem;
-webkit-transition-duration: .4s;
        transition-duration: .4s;
}