How to reset min/max values for jQuery scrollspy on window resize

Question

I am using this scrollspy plugin and I need to reset min/max values when window is resized, because the first section resizes in height and affects all position.top of following sections. What would be the best way to do this?

$('section').each(function() {
    var position = $(this).position();
    $(this).scrollspy({
        min: position.top - $header.outerHeight(),
        max: position.top + $(this).outerHeight() - $header.outerHeight(),
        onEnter: function(element) {
            $('#main-menu').find('a[href$="'+$(element).attr('id')+'"]').addClass('cur');
            /* window.location.hash = 'panel-'+$(element).attr('id'); */
        },
        onLeave: function(element) {
            $('#main-menu').find('a[href$="'+$(element).attr('id')+'"]').removeClass('cur');
        }
    });
});

Answer 1

Try setting the position of the section elements to relative.

position:relative;

Happy Coding :)

Answer 2

I had a similar issue but I couldn't change my elements to be positon relative since they are all custom animations and needed to be in position absolute.

This was my approach.

// Make sure to update Scrollspy once the last resize has fired
var rtime = new Date(1, 1, 2000, 12,00,00);
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        $(window).unbind("scroll");
        // Your Scrollspy function
    }               
}