Question

Not too long ago I asked about setting up a DIV which scrolls with the rest of the page. Post can be found here.

I’ve set this up, using the following code:

JS..

jQuery(function ($) {
    var el = $('#sidebar'),
    pos = el.position().top;

    alert(pos);

    $(window).scroll(function() {
        el.toggleClass('fixed', $(this).scrollTop() >= pos);
    });
});

CSS..

/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0}

A copy of the page can be found here. The alert was just some debugging.

The problem is, when you scroll a small amount, #sidebar suddenly appears at the very top of the page. In addition, sometimes as you scroll further down, the sidebar appears – and sometimes it doesn’t.

Any idea what might be causing such seemingly random functionality?

Answer 1

I’m still trying to figure out why it works in the first place in the jsfiddle example, but anyway, I know how to fix it:

 $(window).scroll(function() {
    if($(this).scrollTop() >= pos){
        el.addClass('fixed');
    }else{
        el.removeClass('fixed');
    }
});

I tested this by unbinding the event you had and replacing it with this code. It seemed to work fine.

The reason I can’t understand why it works in the example: toggleClass should be constantly adding and removing “fixed” if you have scrolled enough, because the conditional is true (true here means whether to toggle). The constant adding and removing of the fixed class causes the jumpy behavior.

You can watch this on your page: open up some dev tools (firegubg or Chrome) and watch what happens to your sidebar element.

[UPDATE]

Actually, I misread the docs. True means the class should be added (I don’t think the docs are very clear though). Thus… the only way I could explain this is if @dunc was running jQuery v1.2 and the switch was getting ignored completely…