.scroll() wird nur einmal ausgeführt

Question

Ich versuche, ein kleines Snippet für eine klebrige Seitenleiste mit jQuery zu erstellen. Aus irgendeinem Grund wird die Funktion innerhalb von .scroll() nur einmal ausgeführt, anstatt bei jedem Scroll-Ereignis ausgeführt zu werden. Was könnte ich falsch machen?

var sticky = $('#sticky'); 
var staticSticky = $(sticky).offset().top; 

$(window).scroll(moveEl(sticky, staticSticky)); 

function moveEl(element, staticElToTop){ 
    if($(window).scrollTop() >= staticElToTop){ 
     $(element).css('top', $(window).scrollTop() + 'px'); 
    } 
} 

Sehen Sie hier für den gesamten Versuch: http://codepen.io/ExcellentSP/pen/GqZwVG

Der obige Code nicht voll funktionsfähig ist. Ich versuche nur, das Scroll-Ereignis richtig zu machen, bevor ich fortfahre.

Answer 1

Sie müssen wickeln Inhalt Ihrer Ihre moveEl Methode in die Funktion (zurück für $(window).scroll() werden) wie folgt aus:

var sticky = $('#sticky'); 
var staticSticky = $(sticky).offset().top; 

$(window).scroll(moveEl(sticky, staticSticky)); 

function moveEl(element, staticElToTop) { 
    return function() { 
    if($(window).scrollTop() >= staticElToTop){ 
     $(element).css('top', $(window).scrollTop() + 'px'); 
    } 
    } 
} 

Erläuterung: Der wesentliche Unterschied besteht darin, dass Sie eine Funktion aufrufen und es gibt undefined standardmäßig zurück, also entspricht es $(window).scroll(undefined). Da Sie es tatsächlich angerufen haben, sehen Sie, dass es nur einmal gefeuert wird, was offensichtlich ist.

Sobald Sie eine Funktion innerhalb moveEl Methode zurückgeben, erhält .scroll() einen Handler, so dass es $(window).scroll(handler) wird. So wird es jetzt wie erwartet funktionieren.

Answer 2

Dabei $ (window) .scroll (moveEl (sticky, staticSticky)) ;, Sie bitten Javascript, um die Funktion auszuführen. Sie übergeben seine Referenz nicht.

$(window).scroll(function(){ 
    moveEl(sticky, staticSticky); 
});