在透明标题下隐藏滚动div内容-需要javascript解决方案

这已经被问过好几次了，最符合我情况的答案是这个

基本上，content div是通过javascript移动的

但是，我有一个固定的头，总是155px。标题是透明的，content div的文本在到达标题时应该消失。由于各种原因，我不能使用掩蔽解决方案，在标题中有几层透明和重叠的复杂背景。一旦到达标题，内容文本应该真正消失，而不是“在下面”

滚动查看发生了什么。当前滚动时，除非滚动条经过标题，否则文本将覆盖标题

JS小提琴-

$（窗口）.load（函数（）{
变量$window=$（window）；
变量$body=$（'body'）；
var$contentWrapper=$（“#content_wrapper”）；
var$content=$（“#content”）；
var minHeaderHeight=160；//页眉高度加边距
var lastWindowHeight=$window.height（）；//保存窗口高度以计算调整大小时的高度差
checkScroll（）；//确保首次加载时滚动和所有高度都正确
stickyTop（）；//如果第一次加载时需要，请确保使用stickyTop
$window.resize（函数（）{
checkScroll（）；
粘滞顶部（）；
});
$window.scroll（函数（）{
粘滞顶部（）；
});
函数checkScroll（）{
var newWindowHeight=$window.height（）；
var windowHeightDif=新窗口高度-上次窗口高度；
lastWindowHeight=newWindowHeight；//保存当前高度以备下次调用
var contentHeight=$content.height（）；
$contentWrapper.height（contentHeight）；//确保包装器将显示整个内容
$body.height（newWindowHeight+contentHeight）；//允许通过
//按窗口高度向下推送内容
var windowScrollTop=$window.scrollTop（）；
如果（windowScrollTop>0）{//如果在顶部，则不要滚动，以避免视频被覆盖
$window.scrollTop（windowScrollTop+windowHeightDif）；//按窗口高度差滚动以保留内容
//在窗口上的相同位置调整大小
}
}
函数stickyTop（）{
var windowScrollTop=$window.scrollTop（）；
var maxsroll=（$window.height（）-minHeaderHeight）；
如果（windowScrollTop>=maxScroll）{
$contentWrapper.css（'position'，'fixed'）.css（'top'，minHeaderHeight）；//在页眉底部停止wrapper top
}否则{
$contentWrapper.css（'position'，'absolute'）.css（'top'，''）；//允许定期滚动
}
如果（$contentWrapper.css（'position'）=='fixed'）{//如果wrapper是固定的，
$content.css（'top'，-（windowScrollTop-maxScroll））；//通过向上移动内容继续滚动
}否则{
$content.css（'top'，0）；//确保内容与包装器对齐
}
}
});//]]> 
html，正文{
位置：相对位置；
宽度：100%；
身高：100%；
}
#标题{
位置：固定；
排名：0；
左：0；
z指数：-1000；
宽度：100%；
高度：155px；
背景色：rgba（0,0,0,0.5）
}
#内容包装器{
位置：绝对位置；
左：0px；
顶部：155px；
宽度：100%；
z指数：-10；
溢出：隐藏；
}
#内容{
位置：绝对位置；
左：0px；
顶部：0px；
字体大小：36px；
}

此标题是半透明的。所有类型的叠加不透明度都会出现在这里。
滚动文本到达透明标题后需要停止显示。
Morbi facilisis neque a eros dictum，而facilisis door pretium。前矢状沟。埃尼安在大漩涡中，在精英的生命中，康瓦利斯·普鲁斯。毛里斯和奥奇拉奇尼亚，奥迪奥诺前庭，比本杜姆岛。Donec mollis，justo quis酵母菌ultricies，lacus velit luctus odio，quis finibus mauris dolor vitae nulla。前矢状位，前矢状位。阿利奎姆·埃拉特·帕特。多奈克设施孕妇毛里斯·奎斯ultricies。二人组和三人组。佩伦茨克nec公司。前无主，后无主诅咒，自由对决，封建的爱神。我是最大的神，我是尊贵的神，我是节奏的神。Donec faucibus blandit mauris ac laoreet。自由女神的权杖。这是一个非常好的例子

不要在同一时间，用同样的方法来测量威尼斯的直径。前庭的权杖是一块巨大的石头。在同侧非中间位置的位置。在酒后驾车的猫科动物维瓦摩斯。塞德维塔turpis非lorem blandit placerat。库拉比图尔·波苏尔·尼斯拉·卡塞特图尔是一只猫科动物，但它是一种特殊的动物。努克·拉奥里特·马莱苏亚达·泰勒斯。悬液的有效性取决于累积量，但取决于生命的直径。前庭，前庭，前庭，前庭，前庭

这是一个很好的例子。这是一个很好的例子。梅塞纳坐在阿梅特·马克西姆斯·里苏斯（amet maximus risus）的位子上。Mauris vitae前庭腔隙。毛里斯·波特提托·阿利奎特·图尔皮斯（Mauris porttitor aliquet turpis），维尔·阿利奎特·尼斯（vel aliquet nisl rutrum quis）。马萨香菇，圣人之命，精英之效。威尼斯人的非nisl前庭。库拉比图尔是一位高贵的女性。两个元素，一个是弗林蒂利亚·佩伦茨克，一个是威尼斯人利奥，一个是尼西·马萨。毛里斯·夸米、马克西姆·埃吉特、马克西姆·萨皮恩。佩伦茨克nec利奥·里索斯

非卢库斯湖伊蒂亚姆。Aliquam velit nibh，ultrices vitae rhoncus eget，非自由孕妇。埃涅阿斯·莱克托斯·普鲁斯（Aenean lectus purus），乌尔特里斯（ultrices id tincidunt sit amet），封建主义者塞德·特皮斯（turpis）。南乌特图尔皮斯在地鼠尸体前被诅咒。莫里斯之家酒店
<div class="fixedHeader" style="position: fixed; display: block; width: 100%;">
</div>
<div class="contentContainer" style="position: relative; display: block;">
</div>