以前曾多次询问这个问题并且最符合我情况的答案就是这个
Hide content underneath a transparent div while scrolling
基本上，内容div正在通过javascript移动。
但是，我有固定标题，总是155px。标题是透明的，内容div的文本在到达标题时应该消失。我不能因为各种原因使用掩蔽解决方案，在标题中有几层透明度和覆盖复杂背景。一旦到达标题，内容文本应该真正消失，而不是在＆＃34;下面＃34;。
滚动查看正在进行的操作。当前在滚动时，除非滚动条通过标题，否则文本将覆盖标题。
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>
答案 0 :(得分：0)
您的固定标头是否需要与其他内容位于同一容器中？
<div class="fixedHeader" style="position: fixed; display: block; width: 100%;">
</div>
<div class="contentContainer" style="position: relative; display: block;">
</div>
我认为这将有相同的＆＃34;在标题下滚动＆＃34;影响？
答案 1 :(得分：0)
我通过稍微修改Trevin Avery代码找到了一个解决方案 - 完全从Javascript代码中删除变量maxScroll，因为我不需要将可滚动内容一直推出可见窗口，就像他的脚本一样。
See demo - 调整浏览器窗口大小以查看为何需要透明度。
$(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>
所以，我们走了，透明的固定头。在完整窗口中运行代码并调整窗口大小以查看页面背景根据窗口宽度而变化 - 这就是我无法使用蒙版的原因。花了将近三天的时间来寻找它，所以希望它能帮助别人！