Create Sidebar Sticky+Animating with jQuery

Blogspot template Fixed Sidebar Floating Share Buttons Sidebar Fixed widget

amit01613

10:15

0

Blogspot template, Fixed Sidebar, Floating Share Buttons, Sidebar Fixed, widget

Sidebar Sticky+Animating with jQuery

Follow the instruction below: 

• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

                                       </body>

• And just before </body> paste the following jQuery code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $(".column-right-inner").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".column-right-inner").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".column-right-inner").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

• Save Template. We're Done!

Note: .column-right-inner is the right sidebar class. If you want to make sticky a left sidebar then replace all those class with .column-left-inner from the jQuery code.
And topPadding = 15; change the value if you need to increase/decrease space on top of the sidebar.