I never like the ideas of floating share button, or ads widget, i always think it will distract reader from the main content. And content is the King. However, i’m curious about how to do this, and because i have almost zero knowledge about javascript and JQuery it took me almost 2 days just to figure out this simple script. Thank god i found a great tutorial by Andrew Henderson: JQuery Sharebar.
Why Use Sticky Floating Share Button and Ad Widget
After trying and testing, i can now see, this can be useful to focus the reader that the share button is there, for a good “shareable” content, the reader will notice the share button, and share it. And for ads, it could maximize your CTR. The ideas to get user/reader attention and not covering/ hide the main content is way better than pop-up mailing list/share button who “beg” the reader to do stuff they don’t want to do.
Sticky float demo:
I create a simple plugin to demonstrate sticky float only in this page. You can check it in this page where i float left sidebar widget and i also add a share button just below to floating duck image.
Sticky Float JQuery
The code is really simple, it’s just check the window scroll and calculate the position of the element you want to float and of add style to make it float. Although there’s lots of JQuery plugin for this, i like this solution better cause i have the flexibility to modify elements manually, so i can use it for everything i need.
Ads Sidebar Sticky Float
This will float the left sidebar (sidebar-3) text widget that i use for ads.
<script type="text/javascript">
/**
* To Make sure it's loaded when the page is ready and loaded.
*/
jQuery(document).ready(function ($) {
/**
* Float Sidebar 3, Text Ads Widget
*/
/* First we need to load this function only if the elements exist. */
if ( $('.singular-post-471 #sidebar-3 #text-10').length > 0 ) {
/* variable of the targeted elements, to make it easier */
var elS3 = $('.singular-post-471 #sidebar-3 #text-10');
/* sticky top variable. */
var stickyTopS3 = $('.singular-post-471 #sidebar-3 #text-10').offset().top; // returns number
/* the bottom class to stop the floating */
var footerTopS3 = $('#footer-menu').offset().top; // returns number
/* calculate the height of targeted class */
var stickyHeightS3 = $('.singular-post-471 #sidebar-3 .widget-last').height();
/* 90 is the pixel height from stop elements "#footer-menu" */
var limitS3 = footerTopS3 - stickyHeightS3 - 90;
/* the function load on window scroll. */
function stickyS3(){ // scroll event
var windowTopS3 = $(window).scrollTop(); // returns number
/**
* If the elements ".singular-post-471 #sidebar-3 #text-10" is lower
* than the top window position, do stuff
*/
if ( stickyTopS3 < windowTopS3 ){
/**
* In this case, we'll add the style: position, and margin top
* also add a css class if you need to extend the styling in your css.
*/
elS3.css({ position: 'fixed', top: 0 }); // add style position
elS3.css('margin-top','5px'); // add style margin-top, just to make it neat
elS3.addClass( "sidebar-3-sticky" ).removeClass( "sidebar-3-no-sticky" ); // add class sticky to use with your stylesheet
}
/**
* If the elements back to normal.
* do stuff the opposite of the above class.
* You need to make sure you override the above style/new css class declaration.
*/
else {
elS3.css({ position: 'absolute', top: 'auto' }); // overide style posotion
elS3.css('margin-top','0'); // return the default margin
elS3.removeClass( "sidebar-3-sticky" ).addClass( "sidebar-3-no-sticky" ); // add non sticky class.
}
/**
* Check bottom ending position, to make sure you didn't
* overflow your footer area.
*/
if ( limitS3 < windowTopS3 ) {
var diffS3 = limitS3 - windowTopS3;
elS3.css({top: diffS3}); // where tha top position need to stop.
}
};
/* execute the function. */
$(window).scroll(stickyS3);
}
});
</script>Share Button Sticky Float:
well to make this i add new share button jus below the featured image, so i can display how it will float, and stick it to the top. Most site use left/right floating share button, but it just not suitable for 3 column page where the content is in the middle of the page.
if ( $('.singular-post-471 #singular-header .social-share').length > 0 ) {
var elSR = $('.singular-post-471 #singular-header .social-share');
var stickyTopSR = $('.singular-post-471 #singular-header .social-share').offset().top;
var footerTopSR = $('#footer-menu').offset().top;
var stickyHeightSR = $('.singular-post-471 #singular-header .social-share').height();
var limitSR = footerTopSR - stickyHeightSR - 10;
function stickySR(){
var windowTopSR = $(window).scrollTop();
if ( stickyTopSR < windowTopSR ){
elSR.css({ position: 'fixed', top: 0 });
elSR.css('margin-top','0');
elSR.css('border-bottom','1px solid #ccc');
elSR.css('width','480px');
elSR.css('z-index','10');
elSR.css('background','#cbe6fd');
}
else {
elSR.css({ position: 'relative', top: 'auto' });
elSR.css('border-bottom','none');
elSR.css('margin-top','0');
elSR.css('z-index','10');
elSR.css('background','#fff');
}
if ( limitSR < windowTopSR ) {
var diffSR = limitSR - windowTopSR;
elSR.css({top: diffSR});
}
};
$(window).scroll(stickySR);
}I hope this can help people who need to create a floating elements for their site, and cause i’m a total newb in javascript and JQuery if you find a better way to do this, or my solution is not a good solution, you can help me to improve it.
The Full Code of Floating Share Button Plugin with bottom element stop:
The Code above is a trial code, you can check the full code of the plugin i use for this page in the second page.
1 2
I been looking for a plugin that creates the floating sidebars but i couldn’t find any out there. I ran across your article and I’m confused where you would put that snippet of code in your wordpress theme?
Would I copy and paste it in the functions.php or the index.php?
Thank you in advance.
it’s just an example code i use for this page,
the code really depends on your site design.
you can add the code from theme function.php or custom plugin, but not in your index.php