Post Title : Make Blogger Sidebar Fixed Sticky That Scrolls with Menu Posted By : Unknown Category: Rating : 100% based on 10 ratings. 10 user reviews.| Post views: Viewed – Written of 0 great posts on TONEYSOFT-BLOG. Item Reviewed: Make Blogger Sidebar Fixed Sticky That Scrolls with Menu 9 out of 10 based on 10 ratings. 9 user reviews. Make Blogger Sidebar Fixed Sticky That Scrolls with Menu

Make Blogger Sidebar Fixed (Sticky) That Scrolls with Menu!

---

You can arrange your blogger sidebar in several ways. Here I will show you some way of displaying sidebar as like fixed, sticky, animating. So lets see some example.

 1. Let's see, how to make Blogger Sidebar Fixed with only CSS

---

Follow the instruction below: 

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

]]></b:skin>

• And just before ]]></b:skin> paste the CSS code below:

  .column-right-inner { position: fixed; }

Save Template. We're Done!

Note: .column-right-inner is the right sidebar class. If you want to make Fised a left sidebar then replace it with .column-left-inner

2. Let's see, how to make Sidebar Sticky+Animating with j Query

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.

3. Let's see, how to make a Widget Sticky with jQuery

Look at the right sidebar of this page and scroll down, a AdSense ads widget is scrolling with you. Thats what I'm going to showing you the code for.

Well Follow the instruction below:

•  At first find-out your widget ID (ex. HTML7)
• 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 src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
    <script type='text/javascript'>
        $(function() {
            var offset = $(&quot;#HTML7&quot;).offset();
            var topPadding = 35;
            $(window).scroll(function() {
                if ($(window).scrollTop() &gt; offset.top) {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Note: Replace #HTML7 With Your Widget ID

• Save Template. We're Done!