A sticky callout that starts fixed positioned and moves into the page when user scrolls to correct spot.
<div class="row column" id="subscription-container">
<div class="subscription-footer" id="email-subscription-footer">
<div class="subscription-wrapper">
<p class="subscription-description">Get design articles delivered to your inbox!</p>
<div class="subscription-form-wrapper">
<form class="subscription-form">
<div class="row collapse">
<div class="small-7 columns">
<input class="input-text subscription-input" placeholder="getupdates@example.com" size="21" type="text">
</div>
<div class="small-5 columns">
<button class="button">Get Updates</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
$subscription-footer-height: 50px;
.subscription-footer {
background: $white;
border-bottom: 1px solid $light-gray;
border-top: 1px solid $light-gray;
bottom: 0;
display: block;
height: $subscription-footer-height;
left: 0;
padding: 15px 10px $subscription-footer-height;
position: fixed;
width: 100%;
z-index: 100;
&.is-in-page {
margin-bottom: 1rem;
position: relative;
}
}
.subscription-description,
.subscription-form {
position: absolute;
}
.subscription-description {
bottom: 0;
color: $medium-gray;
font-size: 0.9rem;
left: 0;
top: 6px;
}
.subscription-form {
max-width: 550px;
min-width: 320px;
right: 10px;
width: 50%;
}
.subscription-wrapper {
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.subscription-footer {
background: #fefefe;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
bottom: 0;
display: block;
height: 50px;
left: 0;
padding: 15px 10px 50px;
position: fixed;
width: 100%;
z-index: 100;
}
.subscription-footer.is-in-page {
margin-bottom: 1rem;
position: relative;
}
.subscription-description,
.subscription-form {
position: absolute;
}
.subscription-description {
bottom: 0;
color: #cacaca;
font-size: 0.9rem;
left: 0;
top: 6px;
}
.subscription-form {
max-width: 550px;
min-width: 320px;
right: 10px;
width: 50%;
}
.subscription-wrapper {
margin: 0 auto;
max-width: 1000px;
position: relative;
}
(function() {
var $container = $('#subscription-container');
var $window = $(window);
var $footer = $('#email-subscription-footer');
$(window).on("load scroll", function() {
var footerOffset = $container.offset().top;
var myScrollPosition = $window.scrollTop();
var windowHeight = $window.height();
var footerHeight = $footer.outerHeight();
if ((myScrollPosition + windowHeight - footerHeight) > footerOffset) {
$footer.addClass('is-in-page');
} else {
$footer.removeClass('is-in-page');
}
});
})();