Javascript Pop up on scroll
<div class="popup">
<div class="close-pop"><i class="fa fa-times"></i></div>
<div class="text-pop">RECEIVE THIS FREE RESOURCE</div>
<div class="col-md-4 text-center img-pop">
<img src="/good-will/wp-content/uploads/2016/03/lp-3-img-png.png" class="img-responsive">
</div>
<div class="col-md-8 desc-pop">
<strong>2016 Sales Executive Report:</strong>
Top Barriers, Trends and Sales Strategies Leaders are Implementing.
<div class="btn-pop"><a class="btn btn-primary join-us s-btn" href="/good-will/braintrust-lp-3/">GET MY REPORT NOW</a></div>
</div>
</div>
<script>// <![CDATA[
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$('.popup').fadeIn();
} else {
$('.popup').fadeOut();
}
});
$( ".close-pop" ).click(function() {
$('.popup').addClass( "hidden" );
});
$( ".btn-close" ).click(function() {
$('.popup').addClass( "hidden" );
});
// ]]></script>
<style>
.img-pop {
padding: 0;
}
.btn-pop {
margin-top:15px;
}
.desc-pop {
padding-right: 0;
font-size:16px;
color: white;
line-height: 20px;
}
.desc-pop strong {
display: inline-block;
width: 100%;
font-size:17px;
}
.popup .btn-pop a {
padding: 7px 20px;
}
.text-pop {
font-size: 22px;
margin-bottom: 15px;
text-align: center;
color: white;
font-weight: bold;
font-family: 'Titillium Web', sans-serif;
}
.close-pop i {
position: relative;
color: white;
font-size: 15px;
top: -1px;
}
.close-pop{
cursor:pointer;
position: absolute;
background-color: #E6E6E6;
border-radius: 50px;
width: 27px;
height: 27px;
border: 1px solid grey;
text-align: center;
right: -10px;
top: -15px;
background-color: black;
}
.popup{
display: none;
background-image: url('/wp-content/uploads/2016/02/bg-pop.jpg');
background-size: cover;
position: fixed;
bottom: 20px;
max-width: 500px;
right: 20px;
z-index: 9999;
padding: 15px 20px;
border-radius: 5px;
-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.41);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.41);
box-shadow:0 0 20px rgba(0, 0, 0, 0.41);
}
</style>