Hallo,

Ik wil op een pagina mijn navigatie naar beneden laten scrollen (fixed) na een bepaald aantal pixels. Die pixels zijn variabel (de hoogte van de voorgaande div).
Dit heb ik allemaal werkend gekregen. Maar nu ben ik op zoek naar een manier om telkens een check op de hoogte van die div uit te voeren, bijvoorbeeld ook bij resizen van de pagina.

Ik heb het volgende, maar dat werk niet helemaal goed (ik moet toch nog steeds refreshen na resizen) en dit lijkt me vrij intensief.
Heeft iemand een goede oplossing?

Code:

$(window).load(function(){
    $(window).on('scroll resize', function () {
        //console.log ($('#intro').outerHeight(true));
        $('#navigation').affix({
            offset: {top: $('#intro').outerHeight(true)}
        });
    });
});

Als ik zo even goed kijk dan geef je de navigatie div een top mee van een X aantal pixels op het moment dat er gescrolled wordt.
Waarom check je niet of je navigatiebar buitenbeeld valt en geeft het dan een "position:fixed" mee?

Ik wil inderdaad het volgende effect bereiken: http://www.strategik.co.uk/ (zie navigatie)

Hoe zou ik bovenstaande code kunnen aanpassen zodat het ook werkt bij resizen van het scherm?