Making a sidebar widget sticky

As a test I quickly ‘fixed’ a sticky sidebar by dropping this code in the Google-analytics box in the theme settings :)
Ofcourse you _should_ play nice and put this script somewhere in a file where this javascript belongs… and correctly use jQuery instead of linking to it again…

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
$(function() {
    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('aside.sidebar_left').offset().top;
     
    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
         
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
// change the 60 to the height that _YOU_ need...
            $('aside.sidebar_left').css({ 'position': 'fixed', 'top':60});
        } else {
            $('aside.sidebar_left').css({ 'position': 'relative' }); 
        }   
    };
     
    // run our function on load
    sticky_navigation();
     
    // and run it again every time you scroll
   $(window).scroll(function() {
         sticky_navigation();
    });
 
});
</script>

Want to know more? I found the demo here:
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

isn’t it possible to create on enfold a custom widget area and than try to position it with css (z-index and fixed) in this manner?

Hi Guys,

I’m having a similar problem. The widget is disappearing after the sidebar ends (so after 50px of padding).

http://b-dev.nl/nm/this-is-a-nice-post/ login:arjen/welkom12345

I can’t find out what element the sidebar is disappearing behind, also even setting a z-index of 10000 to .widget or .sidebar doesn’t solve my problems.

I’ve tried every solution there is to find, (on this forum and wordpress.com forum) but nothing seems to work.

@Pixelbits i’ve also tried adding your code but i think newer theme/plug-in versions prevent this from working as well.

Anyone who has found a solution?

Kind regards!

Hi Andy,

It’s the social buttons on the right side that disapprear while scrolling.

Screenshot:

Kind regards!

Hi Andy,

Actually i had already tried this, but it’s not a nice solution since it creates a white gap before the footer on shorter pages.

While trying to find a solution i ran across quite a lot of forum posts (here and on other sides) regarding problems with the Q2W3 Fixed Widget in enfold, but no one has found the answer. I’d be nice if this was the last post about this issue because we found a definitive solution!

On the other hand, i get that this issue is involving a 3rd party extension, so you can’t spend too much timeon it.

I completely understand if you can’t assist me any further. (i really do)

Kind regards!

Hi Andy,

No problem, could you tell me how to use page-id in css?

Thanks!

sorry – wrong topic – ( you shouldn’t have more than one open. )