jQuery: Come posso migliorare questo evento di scorrimento che viene sparato troppe volte?

Question

Questo codice funziona e fa il lavoro, ma è ESTREMAMENTE povero + rudimentale e presenta alcuni problemi con l'evento di scorrimento. Qualcuno può aiutarmi a ottimizzare l'evento a scorrimento?

prototipo http://codepen.io/rootion/pen/gpZZpG

Struttura e comportamento desiderato:

• Ci sono due contenitori, .layout__left (rosso) e .layout__right (verde).
• Il contenitore verde avrà il contenuto principale e scorrerà normalmente.
• Il contenitore rosso avrà la navigazione in modo che abbia meno contenuto e debba scorrere fino a un certo punto, finché il menu non raggiunge il bordo della pagina.

Questo è quello che sto facendo:

1. First entrambi i contenitori scorrere normalmente.
2. Quando si scorre il contenitore rosso, se la posizione di scorrimento + la dimensione della finestra è più grande del li: ultima posizione figlio (non si può comunque pensare di rilevare il "fondo"), il contenitore ha una posizione fissa.
3. Durante lo scorrimento verso l'alto, la posizione fissa è disabilitata e quando il menu raggiunge la parte superiore del documento, la posizione viene nuovamente riparata e quindi rimossa.

Come ho detto, questo fa il lavoro. Ma è lento e ha problemi durante lo scorrimento. Penso che sia perché sto facendo l'evento scroll e viene eseguito in ogni pixel.

ho provato strozzamento la chiamata di funzione, ma il codice non funziona affatto:

$(window).on('scroll', function() { 
    $.throttle(100, sectionScroll)); 
    }); 

    sectionScroll = function() { 
    var lastScrollTop = 0, delta = 5; 
    var left = $('.layout__left'); 
    var right = $('.layout__right'); 
    var scroll = $(this).scrollTop(); 
    var viewport = $(window).height(); 
    var lastChild = $('.navigation > ul > li:last-child').offset().top; 

    if(Math.abs(lastScrollTop - scroll) <= delta) 
    return; 

    if (scroll > lastScrollTop){ 
    // SCROLL DOWN 
    left.removeClass('top absolute'); 

    // if the last item of the left is visible 
    if ( (scroll + viewport) > (lastChild + 30) ) { 
    // make the left fixed 
    left.addClass('fixed bottom'); 
    console.log("bottom!"); 
    } 

    // SCROLL UP 
    } else { 
    // remove fixed class from left 
    left.removeClass('fixed bottom'); 
    left.addClass('absolute bottom'); 

    if (scroll <= left.position().top ) { 
    left.removeClass('bottom absolute'); 
    left.addClass('top fixed'); 
    left.removeClass('top fixed'); 
    console.log("top!"); 
    } 
    } 

    lastScrollTop = scroll; 
    }; 

Qualsiasi feedback?

Answer 1

Un modo per farlo è quello di mettere da qualche parte nello script:

var isStarted = false; 

Poi, nella vostra funzione di avvio:

if(!isStarted) { 
    isStarted = true; 
//other stuff 
} else { 
    return false; //because it's already doing it's thing 
} 

Nella funzione di arresto:

isStarted = false;