Verwenden Sie die Funktion als „auf“ Event?

Question

Im Moment habe ich diese Funktion:

function highlightBoxes() { 
    var windowStart = $(window).scrollTop(); 
    var windowEnd = windowStart + $(window).height(); 

    $('.box').each(function() { 
    var box = $(this); 
    var start = box.offset().top; 
    var end = start + box.height(); 

    if (windowStart <= start && windowEnd >= end) { 
     box.addClass('active'); 
    } else { 
     box.removeClass('active'); 
    } 
    }); 
} 

highlightBoxes(); 
$(document).scroll(highlightBoxes); 
$(window).resize(highlightBoxes); 

Welche wenn ein ganzes Element (in diesem Fall .box) ist in Sicht (jsfiddle) überprüft. Allerdings möchte ich die Funktion als ein auf Ereignis verwenden zu können, so kann ich es für viele verschiedene Elemente verwenden. Etwas wie:

$('.box').on('inview', function() { 
    if (elementIsInView) { 
     // make the box red 
    } else { 
     // make the box the original color 
    } 
}); 

Wie kann ich das tun?

Answer 1

mit on bedeuten, müssen Sie ein Ereignis mit dem gleichen Namen triggern, eine super einfache Version hierfür ist die Verwendung document als Message-Bus wie:

$(document).trigger('inview'); 

daher an der Stelle in Ihrem Code, wo Sie ein Ereignis wie die oben hat entschieden, dass inview wahr sein sollte, Feuer, an welchem ​​Punkt des on Ereignis die Funktion ausgeführt wird.

Basierend auf dem obigen Code möchten Sie wahrscheinlich die if-Anweisung aus dem on-Ereignis verschieben und in der Tat als separate Funktion ausführen. Wenn elementIsInView true zurückgibt, können Sie das inview Ereignis ausgelöst.

Answer 2

könnten Sie die schweben Ereignis verwenden.

Wenn nicht klar mit Ihrer Antwort ist, lassen Sie es mich wissen

Answer 3

klicken, schweben, ziehen Sie alle Ereignisse sind. Event ist eine Aktion, die vom Benutzer angewendet wird. Die Funktion ist ein declare mit javascript.Is nicht direkt running.Its erst nach Ereignis trigger.Event betrieben von w3c erklärt werden

Ich glaube, Sie so etwas brauchen:

Assign-Funktion mit Taste click.Its arbeitet von Taste Klicken Sie auf Ereignis.

$('button').on('click',hello) 
 

 
function hello(){ 
 
    console.log('button Clicked') 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button >hi</button>

oder

$('button').on('click',function hello(){ 
    console.log('button Clicked') 
    }) 

Für Ihren Code zu tun wie dieser

$('.box').on('click', function inview() { 
    if (elementIsInView) { 
     // make the box red 
    } else { 
     // make the box the original color 
    } 
}); 

Answer 4

try this:

function checkElementToBeInView(elem, callback) { 
    $(elem).each(function() { 
    var element = $(this); 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = element.offset().top; 
    var elemBottom = elemTop + element.height(); 
    var isInView = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
    callback(element, isInView); 
    }); 
} 
$(window).on("load resize scroll", function(e) { 
    checkElementToBeInView(".box", function(elem, isInView) { 
    if (isInView) 
     elem.addClass('active'); 
    else 
     elem.removeClass('active'); 
    });