当用户向下滚动时，jQuery将主页面内容（#main）淡化为

Question

无法找到我需要达到的确切答案。

我有一本打开的书的全角背景。当用户开始向下滚动并且从浏览器顶部以40px完全淡化时，我需要#main div中的所有内容从浏览器窗口的顶部开始淡出60px。否则，内容会滚动到书本背景图像的顶部并破坏效果。

当然，当用户再次向上滚动时，内容必须淡入。

这是一个使用JointsWP（基础6）的Wordpress网站，除了在主页上有一个顶部菜单（它不粘）所以不应该是一个问题。

我目前正在解决这个问题，一个透明的固定标题，高度为60px（下面的CSS）和溢出：自动主要内容但是这会导致设置固定（非粘性）页脚的问题，而且我认为褪色内容将是一种更好的方式。

#goto-head { 
width: 100%; 
height: 40px; 
position: fixed;
top: 0;
}

#goto-main {
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
padding-bottom: 0px; /* or 40px? */
} 

#footer {
clear: both;
height: 40px;
margin-top: -40px; 
}  

万一它有任何方位，这就是页脚js。唯一的目的是在页面上只有少量内容时将页脚保持在窗口的底部：

jQuery(window).bind("load", function () {
var footer = jQuery("#footer");
var pos = footer.position();
var height = jQuery(window).height();
height = height - pos.top;
height = height - footer.height();
if (height > 0) {
    footer.css({
        'margin-top': height + 'px'
    });
}
}); 

您可以看到网站here

我知道答案涉及jQuery scrollTop和淡入淡出，但除此之外，我迷失了。

谢谢， 崔西

更新：澄清。我有一个固定标题的唯一原因是阻止文本从窗口顶部滚动超过40px。如果我可以在用户向下和向上滚动时让文本（和图像）淡出并返回顶部，我可以删除顶部的固定标题。

UPDATE2：以下是已删除固定透明div的屏幕截图（我已恢复固定透明div，因为该网站已启用）。第一个显示没有固定div或标题的普通页面。一切都在现实和正确。第二个显示当您向下滚动此页面时会发生什么：您可以看到搜索框和文本等超出了背景图像中书的顶部。看起来很糟糕

我希望文本/内容在它到达之前消失。