Take a moment to explore the concept demonstrated in the sample below. It's not as complex as it may seem at first glance.
The basic idea is to retrieve the height of the .overlay element and then, as the user scrolls, monitor the scroll position using the scrollTop() function.
scrollTop(): Retrieves the current vertical position of the scroll bar for the first matched element or sets the vertical position of the scroll bar for all matched elements.
Once the scrollTop() value equals the overlayHeight, display the button.
Continuously adjust the marginTop: scrollTop() until the previous condition holds true. This ensures that the .show-when-visible element remains visible instead of staying at the top of the document.
Please note that the code snippet below serves as a basic demonstration of how you can achieve your desired outcome. You can enhance it by adding event handlers to the buttonShowWhenVisible, which could trigger actions like opening a popup or displaying an iframe with the relevant video content:
buttonShowWhenVisible.click(function() {
// Implement the logic to show the video
});
View the following snippet in full-page mode
$(document).ready(function() {
var win = $(window); // Window
var content = $(".content") // jQuery element for Content
var overlay = $(".overlay"); // jQuery element for Overlay
var buttonShowWhenVisible = $(".show-when-visible"); // The button that fades in
var showAfterScroll = $(".show-after-scroll"); // Fades in on scroll
var overlayHeight, scrollTop, stopMargin, opacityOut, opacityIn;
win.scroll(function(e) {
scrollTop = win.scrollTop();
overlayHeight = overlay.outerHeight();
stopMargin = false;
opacityOut = (1 - scrollTop / overlayHeight);
opacityIn = (scrollTop / overlayHeight);
if(opacityOut > 0.00)
overlay.css("opacity", opacityOut);
if(opacityIn < 1)
showAfterScroll.css("opacity", opacityIn);
if(scrollTop >= overlayHeight) {
stopMargin = true;
buttonShowWhenVisible.fadeIn();
} else {
buttonShowWhenVisible.fadeOut();
}
if(!stopMargin) {
content.css({
marginTop: scrollTop
});
}
});
});
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
h1 span {
color: orange;
}
.content {
min-height: 2000px;
}
.overlay {
background-color: rgba(0, 0, 0, .8);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: #fff;
padding: 40px 0;
text-align: center;
z-index: 9999;
}
.show-after-scroll {
text-align: center;
padding: 60px 0;
opacity: 0;
}
.btn-lg {
background-color: orange;
color: #fff;
font-size: 12px;
padding: 20px 80px;
border-radius: 40px;
border: none;
}
.show-when-visible {
display: none;
}
.overlay p {
max-width: 600px;
font-size: 44px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="overlay">
<h1>Studio<span>.</span></h1>
<p>This is some long big text saying hello</p>
<br/><br/><br/>
<button class="btn-lg">REQUEST EARLY ACCESS</button>
</div>
<div class="show-after-scroll">
<p>There will a button appear when you scroll down, try it out!</p>
<button class="btn-lg show-when-visible">BONJOUR</button>
</div>
</div>
You can experiment with the snippet here: https://codepen.io/richardmauritz/pen/QrKvBQ?editors=0010