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

Question

之前已经问过几次，最适合我情况的答案是这个

滚动时在透明div下隐藏内容

基本上，内容div是通过javascript移动的。

但是，我有一个固定的标题 ，始终为155px。 标题是透明的，并且内容div的文本在到达标题时应消失。 由于种种原因，我无法使用遮罩解决方案，因此在标题中存在多层透明性并覆盖了复杂的背景。 一旦到达标题，内容文本应该真正消失，而不是“在下面”。

滚动查看发生了什么。 当前在滚动时，文字会覆盖标题，除非滚动条通过标题。

JS小提琴-https: //jsfiddle.net/b5nyohr5/5/

 $(window).load(function(){ var $window = $(window); var $body = $('body'); var $contentWrapper = $('#content_wrapper'); var $content = $('#content'); var minHeaderHeight =160; // the height of the header plus margin var lastWindowHeight = $window.height(); // save window height to calculate difference in height on resize checkScroll(); // make sure scroll and all heights are correct on first load stickyTop(); // make sure sticky top is used if needed on first load $window.resize(function() { checkScroll(); stickyTop(); }); $window.scroll(function() { stickyTop(); }); function checkScroll() { var newWindowHeight = $window.height(); var windowHeightDif = newWindowHeight - lastWindowHeight; lastWindowHeight = newWindowHeight; // save current height for next call var contentHeight = $content.height(); $contentWrapper.height(contentHeight); // make sure wrapper will show entire content $body.height(newWindowHeight + contentHeight); // allow content to be scrolled off the screen by // pushing content down by the amount of window height var windowScrollTop = $window.scrollTop(); if (windowScrollTop > 0) { // don't scroll if at top to avoid video getting covered $window.scrollTop(windowScrollTop + windowHeightDif); // scroll by window height difference to keep content // in the same position on window resize } } function stickyTop() { var windowScrollTop = $window.scrollTop(); var maxScroll = ($window.height() - minHeaderHeight); if (windowScrollTop >= maxScroll) { $contentWrapper.css('position', 'fixed').css('top', minHeaderHeight); // stop wrapper top at bottom of header } else { $contentWrapper.css('position', 'absolute').css('top', ''); // allow regular scrolling } if ($contentWrapper.css('position') === 'fixed') { // if wrapper is fixed, $content.css('top', -(windowScrollTop - maxScroll)); // continue scrolling by shifting content up } else { $content.css('top', 0); // make sure content is lined up with wrapper } } });//]]> 

 html, body { position: relative; width:100%; height:100%; } #header { position: fixed; top: 0; left: 0; z-index: -1000; width:100%; height: 155px; background-color:rgba(0, 0, 0, 0.5) } #content_wrapper { position: absolute; left: 0px; top:155px; width: 100%; z-index: -10; overflow:hidden; } #content { position: absolute; left: 0px; top: 0px; font-size:36px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="container"> <div id="header"> <h1>This header is semi-transparent . All kind of overlaying opacity will go here. </h1> </div> <div id="content_wrapper"> <div id="content"> <p>The scrolling text needs to stop showing once it reaches the transparent header. <p>Morbi facilisis neque a eros dictum, ut facilisis dolor pretium. Nulla sagittis vel ante sed ornare. Aenean in magna volutpat, consequat elit vitae, convallis purus. Mauris et orci lacinia, vestibulum odio non, bibendum tellus. Donec mollis, justo quis fermentum ultricies, lacus velit luctus odio, quis finibus mauris dolor vitae nulla. Morbi ac sagittis ante, consectetur pretium tellus. Aliquam erat volutpat. Donec facilisis gravida mauris quis ultricies. Duis et suscipit lorem. Pellentesque nec imperdiet nibh. Nullam pretium, nunc nec ultricies cursus, libero dui venenatis purus, a feugiat eros mauris vel libero. Quisque id risus maximus, dignissim sem id, tempus odio. Donec faucibus blandit mauris ac laoreet. Praesent scelerisque lobortis libero eget suscipit. Sed egestas diam hendrerit, fermentum felis in, eleifend lorem.</p> <p>Donec tempus fringilla ipsum, aliquet suscipit diam ornare venenatis. Vestibulum scelerisque posuere nibh tristique aliquam. Proin ullamcorper ipsum non interdum semper. Vivamus id felis egestas nulla imperdiet convallis in vel dui. Sed vitae turpis non lorem blandit placerat. Curabitur posuere nisl ac felis consectetur, ut ultricies diam faucibus. Nunc laoreet malesuada tellus. Suspendisse efficitur accumsan lacus, ut pretium diam euismod vitae. Vestibulum tincidunt fringilla ligula a interdum.</p> <p>Quisque luctus purus nec varius finibus. Sed ut lorem scelerisque velit pretium elementum. Maecenas sit amet maximus risus, pretium molestie arcu. Mauris vitae vestibulum lacus. Mauris porttitor aliquet turpis, vel aliquet nisl rutrum quis. Curabitur risus massa, placerat vitae sapien non, egestas efficitur elit. Etiam ut odio non nisl vestibulum venenatis quis ac erat. Curabitur id sem vel eros tristique dignissim ac id neque. Duis elementum, mi ut fringilla pellentesque, ante neque venenatis leo, a pretium nisi massa nec urna. Mauris quam mi, commodo maximus elementum eget, maximus a sapien. Pellentesque nec leo risus.</p> <p>Etiam non luctus lacus. Aliquam velit nibh, ultrices vitae rhoncus eget, gravida non libero. Aenean lectus purus, ultrices id tincidunt sit amet, feugiat sed turpis. Nam ut turpis cursus ante placerat ultricies. In vitae mauris facilisis lorem maximus accumsan. Curabitur turpis odio, consequat at ante non, mollis porttitor felis. Pellentesque ultricies lacus dapibus diam laoreet venenatis. Phasellus faucibus sollicitudin mi, tempus elementum dui venenatis vitae. In lacinia dui leo, et laoreet eros vehicula nec. Nullam scelerisque ligula non ante luctus porttitor. Donec sed tortor ut felis imperdiet congue eget sit amet dui.</p> <p>Nullam luctus condimentum augue pharetra facilisis. Mauris laoreet ut odio nec posuere. Maecenas accumsan luctus augue, vitae mollis risus dignissim non. Vivamus nec felis sed sapien porta venenatis. Proin a placerat lacus. Donec ut turpis sed massa mollis aliquet. Vivamus sit amet quam nec urna viverra facilisis. Suspendisse vel erat tellus. In pulvinar justo et quam accumsan tincidunt. Fusce purus est, luctus cursus justo ut, auctor sollicitudin nisl. Integer semper bibendum lorem. Fusce volutpat condimentum lorem vitae vestibulum. Pellentesque eleifend lacus eget sodales egestas. Ut purus urna, maximus quis felis nec, luctus gravida nibh.</p> <p>Maecenas in lacinia nibh. Morbi non nibh a lorem egestas commodo. Vivamus arcu libero, congue sit amet velit ut, faucibus commodo sem. Mauris at tellus nec est molestie consectetur cursus quis nisi. Etiam vel consequat felis. Curabitur sed dui ac dolor sollicitudin laoreet non nec nunc. Sed bibendum eu est vel posuere. Fusce varius volutpat leo at porta. Curabitur maximus nunc ipsum. Aenean placerat dolor in enim feugiat volutpat. Ut pharetra nulla at lorem rutrum posuere. Integer eu justo nec quam vestibulum aliquet. Praesent aliquam fermentum est vel varius.</p> <p>Pellentesque imperdiet pharetra molestie. Sed velit tortor, tincidunt et lacus quis, facilisis dapibus ex. Cras et rutrum leo, et sodales augue. In hac habitasse platea dictumst. Nunc acc</p> </div> </div> </div> 

Answer 1

有什么理由需要将固定标头与其余内容放在同一容器中？

<div class="fixedHeader" style="position: fixed; display: block; width: 100%;">
</div>
<div class="contentContainer" style="position: relative; display: block;">
</div>

我认为这将具有相同的“在标题下滚动”效果？

Answer 2

我找到了通过稍微修改Trevin Avery代码的解决方案-完全从Javascript代码中删除了变量maxScroll，因为我不需要像他的脚本一样将可滚动内容完全推出可见窗口。

请参阅演示 -调整浏览器窗口的大小以了解为什么需要透明度。

 $(window).load(function(){ var $window = $(window); var $body = $('body'); var $contentWrapper = $('#content_wrapper'); var $content = $('#content'); var minHeaderHeight =160; // the height of the header plus margin var lastWindowHeight = $window.height(); // save window height to calculate difference in height on resize checkScroll(); // make sure scroll and all heights are correct on first load stickyTop(); // make sure sticky top is used if needed on first load $window.resize(function() { checkScroll(); stickyTop(); }); $window.scroll(function() { stickyTop(); }); function checkScroll() { var newWindowHeight = $window.height(); var windowHeightDif = newWindowHeight - lastWindowHeight; lastWindowHeight = newWindowHeight; // save current height for next call var contentHeight = $content.height(); $contentWrapper.height(contentHeight); // make sure wrapper will show entire content $body.height(newWindowHeight + contentHeight); // allow content to be scrolled off the screen by // pushing content down by the amount of window height var windowScrollTop = $window.scrollTop(); if (windowScrollTop > 0) { // don't scroll if at top to avoid video getting covered $window.scrollTop(windowScrollTop + windowHeightDif ); // scroll by window height difference to keep content // in the same position on window resize } } function stickyTop() { var windowScrollTop = $window.scrollTop(); // check where the scrollbar is if (windowScrollTop >= 0) { // stop wrapper top at bottom of header $contentWrapper.css('position', 'fixed').css('top', minHeaderHeight); } else { // allow regular scrolling $contentWrapper.css('position', 'absolute').css('top', ''); } if ($contentWrapper.css('position') === 'fixed') { // if wrapper is fixed, $content.css('top', - windowScrollTop); // continue scrolling by shifting content up } else { $content.css('top', 0); // make sure content is lined up with wrapper } } });//]]> 

 html, body { position: relative; width:100%; height:100%; } body { background:url(http://www.idea-bureau.com/images/background.png); background-repeat: no-repeat; background-position:center, center; background-attachment: fixed; } #header { position: fixed; top: 0; left: 0; z-index: -1000; width:100%; height: 155px; background-color:rgba(0, 0, 0, 0.5); } #content_wrapper { position: absolute; left: 0px; top:155px; width: 100%; z-index: -10; overflow:hidden; } #content { position: absolute; left: 0px; top: 0px; font-size:25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="container"> <div id="header"> <h1>This header is semi-transparent . All kind of overlaying opacity will go here. </h1> </div> <div id="content_wrapper"> <div id="content"> <p>The scrolling text needs to stop showing once it reaches the transparent header. <p>Morbi facilisis neque a eros dictum, ut facilisis dolor pretium. Nulla sagittis vel ante sed ornare. Aenean in magna volutpat, consequat elit vitae, convallis purus. Mauris et orci lacinia, vestibulum odio non, bibendum tellus. Donec mollis, justo quis fermentum ultricies, lacus velit luctus odio, quis finibus mauris dolor vitae nulla. Morbi ac sagittis ante, consectetur pretium tellus. Aliquam erat volutpat. Donec facilisis gravida mauris quis ultricies. Duis et suscipit lorem. Pellentesque nec imperdiet nibh. Nullam pretium, nunc nec ultricies cursus, libero dui venenatis purus, a feugiat eros mauris vel libero. Quisque id risus maximus, dignissim sem id, tempus odio. Donec faucibus blandit mauris ac laoreet. Praesent scelerisque lobortis libero eget suscipit. Sed egestas diam hendrerit, fermentum felis in, eleifend lorem.</p> <p>Donec tempus fringilla ipsum, aliquet suscipit diam ornare venenatis. Vestibulum scelerisque posuere nibh tristique aliquam. Proin ullamcorper ipsum non interdum semper. Vivamus id felis egestas nulla imperdiet convallis in vel dui. Sed vitae turpis non lorem blandit placerat. Curabitur posuere nisl ac felis consectetur, ut ultricies diam faucibus. Nunc laoreet malesuada tellus. Suspendisse efficitur accumsan lacus, ut pretium diam euismod vitae. Vestibulum tincidunt fringilla ligula a interdum.</p> <p>Quisque luctus purus nec varius finibus. Sed ut lorem scelerisque velit pretium elementum. Maecenas sit amet maximus risus, pretium molestie arcu. Mauris vitae vestibulum lacus. Mauris porttitor aliquet turpis, vel aliquet nisl rutrum quis. Curabitur risus massa, placerat vitae sapien non, egestas efficitur elit. Etiam ut odio non nisl vestibulum venenatis quis ac erat. Curabitur id sem vel eros tristique dignissim ac id neque. Duis elementum, mi ut fringilla pellentesque, ante neque venenatis leo, a pretium nisi massa nec urna. Mauris quam mi, commodo maximus elementum eget, maximus a sapien. Pellentesque nec leo risus.</p> <p>Etiam non luctus lacus. Aliquam velit nibh, ultrices vitae rhoncus eget, gravida non libero. Aenean lectus purus, ultrices id tincidunt sit amet, feugiat sed turpis. Nam ut turpis cursus ante placerat ultricies. In vitae mauris facilisis lorem maximus accumsan. Curabitur turpis odio, consequat at ante non, mollis porttitor felis. Pellentesque ultricies lacus dapibus diam laoreet venenatis. Phasellus faucibus sollicitudin mi, tempus elementum dui venenatis vitae. In lacinia dui leo, et laoreet eros vehicula nec. Nullam scelerisque ligula non ante luctus porttitor. Donec sed tortor ut felis imperdiet congue eget sit amet dui.</p> <p>Nullam luctus condimentum augue pharetra facilisis. Mauris laoreet ut odio nec posuere. Maecenas accumsan luctus augue, vitae mollis risus dignissim non. Vivamus nec felis sed sapien porta venenatis. Proin a placerat lacus. Donec ut turpis sed massa mollis aliquet. Vivamus sit amet quam nec urna viverra facilisis. Suspendisse vel erat tellus. In pulvinar justo et quam accumsan tincidunt. Fusce purus est, luctus cursus justo ut, auctor sollicitudin nisl. Integer semper bibendum lorem. Fusce volutpat condimentum lorem vitae vestibulum. Pellentesque eleifend lacus eget sodales egestas. Ut purus urna, maximus quis felis nec, luctus gravida nibh.</p> <p>Maecenas in lacinia nibh. Morbi non nibh a lorem egestas commodo. Vivamus arcu libero, congue sit amet velit ut, faucibus commodo sem. Mauris at tellus nec est molestie consectetur cursus quis nisi. Etiam vel consequat felis. Curabitur sed dui ac dolor sollicitudin laoreet non nec nunc. Sed bibendum eu est vel posuere. Fusce varius volutpat leo at porta. Curabitur maximus nunc ipsum. Aenean placerat dolor in enim feugiat volutpat. Ut pharetra nulla at lorem rutrum posuere. Integer eu justo nec quam vestibulum aliquet. Praesent aliquam fermentum est vel varius.</p> <p>Pellentesque imperdiet pharetra molestie. Sed velit tortor, tincidunt et lacus quis, facilisis dapibus ex. Cras et rutrum leo, et sodales augue. In hac habitasse platea dictumst. Nunc acc</p> </div> </div> </div> 

所以，我们开始，透明的固定头。 在全窗口中运行代码并调整窗口大小，以查看页面背景根据窗口宽度而变化-这就是为什么我不能使用遮罩的原因。 花费了将近三天时间寻找它，希望对您有所帮助！