Sticky Share Button

by kompiajaib

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class='shareOnscroll ani-dur ani-name'> 
    <ul> 
        <li class='fb'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook'> <span class='fa-stack fa-lg' title='Share to Facebook'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-facebook fa-stack-1x fa-inverse'></i></span> </a>
        </li>
        <li class='pt'> <a href='javascript:print(document)' title='Print This Blog'><span class='fa-stack fa-lg' title='Print This Blog'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-print fa-stack-1x fa-inverse'></i></span></a> 
        </li>
        <li class='tw'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Twitter'> <span class='fa-stack fa-lg' title='Share to Twitter'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-twitter fa-stack-1x fa-inverse'></i></span> </a>
        </li>
        <li class='gp'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Google+'> <span class='fa-stack fa-lg' title='Share to Google+'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-google-plus fa-stack-1x fa-inverse'></i></span> </a>
        </li>
    </ul>
</div>

CSS

body{height:4000px;font-size:16px;font-family:'Open Sans',sans-serif;text-align:left;margin:0}

.shareOnscroll{margin:0;padding:0;text-align:center;position:fixed;top:400px;left:10px;z-index:100000;display:none}
.shareOnscroll ul{list-style:none;text-align:center}
.shareOnscroll ul li{list-style:none}
.shareOnscroll ul li.fb,.shareOnscroll ul li.pt{position:absolute;left:0;z-index:1;font-size:18px}
.shareOnscroll ul li.fb{bottom:15px;}
.shareOnscroll ul li.pt{bottom:165px;}
.shareOnscroll ul li.tw,.shareOnscroll ul li.gp{position:absolute;left:-10px;z-index:1;font-size:18px}
.shareOnscroll ul li.tw{bottom:65px;}
.shareOnscroll ul li.gp{bottom:115px;}
.shareOnscroll ul li.fb,.shareOnscroll ul li.pt,.shareOnscroll ul li.tw,.shareOnscroll ul li.gp{-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:0.7;transition:all .4s ease-in-out}
.shareOnscroll ul li.fb:hover,.shareOnscroll ul li.pt:hover,.shareOnscroll ul li.tw:hover,.shareOnscroll ul li.gp:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);opacity:1;}
.shareOnscroll ul li.fb a{color:#324b81 !important}
.shareOnscroll ul li.tw a{color:#01a7de !important}
.shareOnscroll ul li.gp a{color:#ba3227 !important}
.shareOnscroll ul li.pt a{color:#0a7111 !important}

.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes bounceIn {0%{opacity:0;-webkit-transform:scale(.9);}100%{-webkit-transform: scale(1);}}
@-moz-keyframes bounceIn {0%{opacity: 0;-moz-transform: scale(.9);}100%{-moz-transform:scale(1);}}
@-ms-keyframes bounceIn {0% {opacity:0;-ms-transform:scale(.9);}100%{-ms-transform:scale(1);}}
@keyframes bounceIn {0%{opacity:0;transform:scale(.9);}100%{transform:scale(1);}}
.ani-name {-webkit-animation-name: bounceIn;-moz-animation-name: bounceIn;-ms-animation-name: bounceIn;animation-name: bounceIn;}

JavaScript

var $toTop=$(".shareOnscroll");$(window).scroll(function(){$(this).scrollTop()>500?$toTop.fadeIn():$toTop.is(":visible")&&$toTop.fadeOut()});