Make Sticky Share Button On Scroll
Updated on April 07, 2016
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.
DEMO
Please scroll demo page ...
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}CSS code above is included with the animation code bounceIn to give effect when the share button appear.
.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;}
Step four
Copy this HTML code.<b:if cond='data:blog.pageType == "item"'>Please save the above code under the following codes or similar as below:
<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>
<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'/> <!-- clear for photos floats -->
</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 ...