Make Sticky Share Button On Scroll

Updated on April 07, 2016 - Post a Comment

Actually this is the development of the share button before I post, just more I simplify and add effects show hide when the page is rolled up and added animation effects also arise when the share button.

Author: Adhy Suriady
The result of this modification will share button like appearance on the animated gif below:

How about it, want to try? For those who want to try it please follow the way below.

The first step

Make sure your blog is using a font Awesome.

Step two

Make sure your blog is already using jquery library.

Third step

Please use the CSS code below.

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

CSS code above is included with the animation code bounceIn to give effect when the share button appear.

Step four

Copy this HTML code.

<b:if cond='data:blog.pageType == "item"'>
<div class='shareOnscroll ani-dur ani-name'>
<ul>
<li class='fb'><a expr:href='"http://www.facebook.com/sharer.php?u=" + 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='"http://twitter.com/share?url=" + 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='"https://plus.google.com/share?url=" + 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>
</b:if>

Please save the above code under the following codes or similar as below:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> 
</div>

Fifth step

Please save jquery below the above code </body>

<script type='text/javascript'>
//<![CDATA[
var $toTop=$(".shareOnscroll");$(window).scroll(function(){$(this).scrollTop()>500?$toTop.fadeIn():$toTop.is(":visible")&&$toTop.fadeOut()});
//]]>
</script>

CSS code above will put the share button to the left of the blog, if you want to display next kana please change the code left becomes right in the CSS code below.

.shareOnscroll{margin:0;padding:0;text-align:center;position:fixed;top:400px;left:10px;z-index:100000;display:none}

So even for a distance of share button on the top, please arrange the numbers on the code top . To adjust the height of the appearance of the button when the page is scrolled, simply set the amount of numbers on his jquery code. Good luck...

DEMO

Please scroll demo page ...