Social popup on page scroll using jQuery and CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select / Deselect all checkboxes using jQuery</title>
</head>
<style type="text/css">
/* page text content css */
h1{font-size:45px;text-align:center; text-decoration:underline;}
h3{font-size:40px;color:#FA0530}
p{font-size:40px;}
/* popup css*/
#spopup{
background:#f3f3f3;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
-moz-box-shadow:inset 0 0 3px #333;
-webkit-box-shadow:inset 0 0 3px #333;
box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;
width:300px;
position:fixed;
bottom:13px;
right:2px;
display:none;
z-index:90;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div>
<h3>Scroll down the page, the social popup would be appear at the right side corner. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare facilisis risus venenatis mattis. Fusce convallis vehicula dui sed rhoncus. Donec lorem velit, bibendum ac libero in, feugiat dapibus eros. Donec faucibus enim ac ligula tempus, vitae dignissim felis fermentum. Curabitur lectus orci, tincidunt sit amet ornare ac, scelerisque quis ligula. Nunc iaculis ligula non gravida consequat. Curabitur efficitur placerat odio. Aliquam ut aliquet nunc, in mollis purus. Morbi id orci ut odio suscipit placerat eu suscipit justo. Sed condimentum ligula eu odio bibendum, ac convallis erat finibus.</p>
<p>Fusce pellentesque, dui eget auctor luctus, nisl orci aliquam tortor, in blandit mi nulla at urna. Maecenas felis leo, ullamcorper sed vehicula quis, tincidunt non nisi. Praesent iaculis lacus nec commodo facilisis. Sed sagittis ipsum vel cursus venenatis. Mauris dapibus commodo blandit. In tristique diam sem, quis vulputate quam congue sed. Sed cursus nulla a lectus hendrerit ultricies. In vulputate feugiat mauris. Nullam suscipit sed nisl nec facilisis. Nulla luctus justo id semper accumsan. Ut ultricies nisl et cursus convallis. Sed vel arcu ac eros tristique posuere eget ac nibh.</p>
<p>Vivamus placerat leo id turpis varius, sit amet vehicula sapien pretium. Etiam quam est, viverra at dui nec, tincidunt volutpat elit. Vestibulum varius velit ut imperdiet tincidunt. Sed venenatis sem sit amet rhoncus hendrerit. Mauris eu accumsan ante. Mauris in accumsan purus. Sed blandit vehicula pharetra. Donec a vehicula elit, sed auctor lectus. Morbi lobortis tempus nulla, sed sollicitudin libero porttitor eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed convallis arcu vitae sem pulvinar mattis. Duis ac enim dui. Sed et eros pellentesque, bibendum est id, tincidunt mi.</p>
<p>Sed ut varius lorem. Duis ac ex sagittis, facilisis eros eu, venenatis quam. Pellentesque sed nunc dui. Praesent scelerisque urna at enim condimentum faucibus. Proin pharetra pellentesque enim, in suscipit neque. Sed sit amet felis nunc. Curabitur eu urna elementum, congue lectus vel, feugiat enim. Nunc commodo euismod metus vitae lobortis. Nullam sit amet ullamcorper justo.</p>
</div>
<div id="spopup" style="display: none;">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onClick="return closeSPopup();"><b style="font-size:18px;">X</b></a>
<div class="sidebox">
<a class="side-twitter" href="http://twitter.com/kenshin0023"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Gr4Wc9bgsUdsyzeXWbNV1r8jMcL0iW5SkjwexRWzWyfsIGZl2FpsVKWWWgWmmMG2KuJikWQLl1OYTubGwc-nhfC4q0PCYI5FRs7_1FuqRWSyXkn0W7G0bB_6aQEXijRZzeDfG0TrEWdE/s400/twitter.gif"/></a><p></p>
<a class="side-rss" href="/feeds/posts/default"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGHlsDThchOtiET0kwI_1K7zZoq6JH78WftafRUUHRCsZow5zJTFfXBYjVukhZn_5Ljhyl3JCtqEqtmZcYGt-mtZvUV7PmEuLqW95ACwj-WujO4DwY_v2RM9kf_AgufifpuInlS7nxSiM/s400/rss.gif"/></a>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" async >
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()/5)
$("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
$('#spopup').hide('slow');
}
</script>
</body>
</html>
