JQuery: Sticky Float Share Button, Menus, Widget, Sidebar etc.

Share Button, Sidebar, Sticky Float WordPress Plugin with JQuery

<?php
/**
 * Plugin Name: SC DEMO | Floating
 * Plugin URI: https://shellcreeper.com/?p=471
 * Description: Floating sidebar for Genbu Theme
 * Version: 0.1
 * Author: David Chandra Purnama
 * Author URI: https://shellcreeper.com/
 *
 * This program is free software; you can redistribute it and/or modify it under the terms  
 * of the GNU General Public License version 2, as published by the Free Software Foundation.
 * You may NOT assume that you can use any other version of the GPL.
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *
 * @version 0.1
 * @author David Chandra Purnama <[email protected]>
 * @copyright Copyright (c) 2012, David Chandra Purnama
 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 */

add_action('wp_footer','genbu_floating_sidebar_settings',99);
function genbu_floating_sidebar_settings(){
    $page = get_query_var('page');
    if( is_single('471') && $page == "" ){
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {

    /**
     * Sidebar 3
     */
    if ( $('.layout-480 #sidebar-3 .widget').length > 0 ) { // make sure element exists

        var elS3 = $('.layout-480 #sidebar-3 .widget');
        var stickyTopS3 = $('.layout-480 #sidebar-3 .widget').offset().top; // returns number
        var footerTopS3 = $('#footer-menu').offset().top; // returns number
        var stickyHeightS3 = $('.layout-480 #sidebar-3 .widget').height();
        var limitS3 = footerTopS3 - stickyHeightS3 - 130;

        function stickyS3(){ // scroll event
            var windowTopS3 = $(window).scrollTop(); // returns number

            if ( stickyTopS3 < windowTopS3 ){
                elS3.css({ position: 'fixed', top: 0 });
                elS3.css('margin-top','5px');
                elS3.addClass( "sidebar-3-sticky" ).removeClass( "sidebar-3-no-sticky" );
            }
            else {
                elS3.css({ position: 'absolute', top: 'auto' });
                elS3.css('margin-top','0');
                elS3.removeClass( "sidebar-3-sticky" ).addClass( "sidebar-3-no-sticky" );
            }

            if ( limitS3 < windowTopS3 ) {
                var diffS3 = limitS3 - windowTopS3;

                elS3.css({top: diffS3});
            }

        };

        $(window).scroll(stickyS3);
    }

    /**
     * Sidebar 4
     */
    if ( $('#sidebar-1').length > 0 ) { // make sure element exists

        var elS4 = $('#sidebar-1');
        var stickyTopS4 = $('#sidebar-1').offset().top; // returns number
        var footerTopS4 = $('#footer-menu').offset().top; // returns number
        var stickyHeightS4 = $('#sidebar-1').height();
        var limitS4 = footerTopS4 - stickyHeightS4 - 130;

        function stickyS4(){ // scroll event
            var windowTopS4 = $(window).scrollTop(); // returns number

            if ( stickyTopS4 < windowTopS4 ){
                elS4.css({ position: 'fixed', top: 0 });
                elS4.css('margin-top','5px');
                elS4.css('background','transparent');
                elS4.css('width','300px');
                $('#sidebar-1').css('margin-top','5px');
            }
            else {
                elS4.css({ position: 'relative', top: 'auto' });
                elS4.css('margin-top','0');
                elS4.css('background','#fff');
                $('#sidebar-1').css('margin-top','0');
            }

            if ( limitS4 < windowTopS4 ) {
                var diffS4 = limitS4 - windowTopS4;
                elS4.css({top: diffS4});
            }

        };

        $(window).scroll(stickyS4);
    }

    /**
     * Share Button
     */
    if ( $('#singular-header .social-share').length > 0 ) { // make sure element exists

        var elSR = $('#singular-header .social-share');
        var stickyTopSR = $('#singular-header .social-share').offset().top; // returns number
        var footerTopSR = $('#footer-menu').offset().top; // returns number
        var stickyHeightSR = $('#singular-header .social-share').height();
        var limitSR = footerTopSR - stickyHeightSR - 130;

        function stickySR(){ // scroll event
            var windowTopSR = $(window).scrollTop(); // returns number

            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','#caebc8');
            }
            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);
    }

});
</script>
    <?php 
    }
}

of course the code above is not the best way to load. I recomend you to create a js file and load it in footer with wp_enqueue_script, and add jQuery as dependency. For example:

add_action('wp_enqueue_scripts','my_sticky_float');
function my_sticky_float(){
    wp_enqueue_script( 'my-sticky', trailingslashit( plugin_dir_url( __FILE__) ) . 'js/my-sticky.js', array( 'jquery',) ,'0.2.0-20121104', true );
}

1 2