2016-04-26 11 views
2

Ich habe Mühe, ein letztes Bit meines Codes zu arbeiten. Das Problem ist, ich brauche eine Funktion ausgelöst, wenn ein Benutzer einen Bildlauf vorbei an einem divFeuer eine Funktion beim Passieren eines Abschnitts - jquery

So ist die Struktur meiner html grob wie folgt aussieht

<div class="panel-grid-cell"> 
    <div id="pgc-1">...</div> 
    <div id="pgc-2">...</div> 
    ... 
    <div id="pgc-n">...</div> 
</div> 

Die Idee ist, wenn Benutzer einen div mit id="pgc-1" Feuer übergibt eine Funktion und so weiter für den Rest von ihnen.

Jede dieser divs hat einen li a Element mit dem href angebracht, so dass ich meine Funktion so etwas wie dieses

ga('send','event','scroll',city,$(this).text()) 

wo thisli a mit dem href

in den Momenten würde entsprechend aussehen würde was Ich habe das. Eine Funktion zum Durchlaufen div 's und speichern Sie ihre id's in Array. Und ein Build ein li a Menü.

var li=""; 
var linames = ["Intro","1925","1935","1945","1955","1965","1975","1985","1995","2005","Now"]; 
var i = 0; 
function getSectionIDs() 
{ 
    $("div.panel-grid-cell").children().each(function() { 
    if(linames[i] !== undefined) 
    { 
     li += "<li><a href='#"+$(this).attr('id')+"'>"+linames[i]+"</a></li>";   
    } 
    i++; 
    }); 
$("ul.timeline-items").append(li); 
} 

Jetzt habe ich auch eine Funktion, die prüft, wie jedes Element li für weit habe ich scrollen und eine Klasse ändern.

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('ul.timeline-items li a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top -75 <= scrollPos && refElement.position().top+75 + refElement.height()-75 > scrollPos) { 
     $('ul.timeline-items li a').removeClass("active"); 
     currLink.addClass("active"); 
     } 
     else{ 
     currLink.removeClass("active"); 
     } 
    }); 
    } 
    $(document).on("scroll", onScroll); 

Dieser Kodex nicht, was ich will, weil es ständig überprüfen, ob ich die div bestanden haben oder nicht, aber ich brauche, um meine Funktion zu feuern nur einmal.

Irgendwelche Hilfe?

+0

Es kann Ihnen helfen [Erkennen, wenn Benutzer scrollt nach unten von div mit jQuery] (http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with- jQuery). – hmd

+1

Verwenden Sie 'one' Methode von jQuery, wenn Sie eine Methode nur einmal auslösen möchten ... siehe http://api.jquery.com/one/ – RRR

+0

hmm, guter Punkt über' one', muss einen klugen Weg finden befestige es. –

Antwort

0

eine Lösung mich neulich gefunden,

Innerhalb einer Scroll-Funktion nur eine Bedingung gestellt, als $(document).scrollTop()-refElement.offset() entspricht, eine Funktion ausgelöst, und es funktioniert perfekt.

Das bedeutet, dass überprüft wird, wie weit der Benutzer gescrollt hat und wenn dieser Wert gleich dem Offset des Divs ist, feuern Sie eine Funktion ab.

Verwandte Themen