This has been asked several times before and the answer that matches my situation best is this one
Hide content underneath a transparent div while scrolling
basically, the content div is being moved through javascript.
However, I have a fixed header that will always be 155px. The header is transparent, and the text of content div should disappear when it reaches the header. I can not for various reasons use a masking solution, there are several layers of transparency and overlaying complicated backgrounds going on in the header. The content text should truly disappear once reached the header and not go "underneath".
Scroll to see what's going on. Currently on scroll the text covers the header unless the scrollbar passes the header.
JS Fiddle - 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>
