Floating JQuery menu issues on slower connection

Question

I'm trying to create a floating menu (#quickmenu in left hand sidebar of bottom link) that stops at #weather whilst also re-calculating the bottom = $(\'#weather\').offset().top; every 0.5 seconds...

Page to test: Bristol International Jazz & Blues Festival 2014 | Festival Archive

The recalculation is key as I use expandable content in the main body and because without recaculating on slower connections it doestn't work. I need only #weather.offset.top to be recalculated every 5 seconds, not the whole script otherwise it refreshes and flickers...

I've tried to do code it myself and it's not working, it's 99% not coded correctly but can't figure out what's going wrong? The logic seems to be correct though... if (y >= top && z <= bottom) { ....

<script type="text/javascript">

$(document).ready(function () {

    top = $('#quickmenu').offset().top;
    var didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
if ( didScroll ) {

    didScroll = false;
    bottom = $('#weather').offset().top;
    y = $(this).scrollTop();
    z = y + $('#quickmenu').height();

    if (y >= top && z <= bottom) {
        // if so, add the fixed class
        $('#quickmenu').addClass('fixed');
    } else if(z > bottom) {
        // otherwise remove it
        $('#quickmenu').removeClass('fixed').addClass('absolute');
    } else {
        // otherwise remove it
        $('#quickmenu').removeClass('fixed');
    }

    }   
}, 500);

});

</script>

Answer 1

Thanks for the input, and apologies for lack of clarity within the question. I have fixed my issue by taking another approach. I hope that this is less resource heavy?

<script type="text/javascript">

(function () {
    var s = document.querySelector(\'#event-info\').style;
    s.overflow = \'inherit\';
    s.height = \'auto\';
})();


window.updateQuickMenuPos = function () {
    var menu = document.querySelector(\'#quickmenuwrapper\');
    var scroll_pos = document.body.scrollTop;
    var menu_pos = menu.offsetTop + 10;

    var weather = document.querySelector(\'#weather\');
    var pos = (scroll_pos - menu_pos);

    // min height
    if (pos < 0) {
        pos = 0;
    }

    // max height
    if (menu_pos + menu.offsetHeight + pos > weather.offsetTop) {
        pos = weather.offsetTop - menu.offsetHeight - menu_pos;
    }

    var s = menu.style;
    s[\'webkitTransform\'] = s[\'mozTransform\'] = s[\'transform\'] = \'translateY(\' + pos + \'px)\';
};


jQuery(document).scroll(window.updateQuickMenuPos);

</script>