Social popup on page scroll using jQuery and CSS

Social Media is rising in popularity, it makes easier to reach visitors and make your presence felt on search engines. This development now makes a strong presence for any website a necessity. The easiest way to increase website visitors is social like, which can also earn a lot of fan following.

Now every web project has social buttons. The popular social buttons are Facebook Like, Google+ Follow, Tweet Follow, and LinkedIn Follow. In this tutorial, we will discuss how can you open a jQuery dialog window on page scroll and display the social buttons in this popup. When the visitors visit your website homepage and scrolling the page down, a pop-up would appear. Website social pages like or follow buttons will be displayed at this popup. It will help visitors to find your website’s social pages and like the pages.

We have used jQuery, CSS, and HTML for implement whole system. You can easily integrate this social buttons popup at your web project. Also, you can display the email subscription form or anything at this popup. If you wish to view the live demo, you can view the live demo from the above “Demo” link. If you want to download the script, you can download it from the above “Download” link.

JavaScript Code:

At first we need to include jQuery library file.

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$(window).scroll() function is used to detect the scroll event. closeSPopup() is custom JavaScript function which is handle the popup close event.

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
    $('#spopup').hide('slow');
}

CSS Code:

Following CSS codes are used for popup.

#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;
}

HTML Code:

Insert the popup content into “spopup” div.

<div id="spopup" style="display: none;">
    <!--close button-->
    <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
        <img src="ico-x.png" width="18" height="18"/>
    </a>
    <!--insert popup content here-->
</div>

 If you have any query about this tutorial, feel free to post your comments at the below comment form.