Mam stały panel z przewijanym treścią i oddzieloną przez Div. Byłbym, kiedy dowolny treści Div Top osiągnie górną część panelu, alarm pojawił się z tej klasy Div.

Każda div ma taką klasę taką <div class="section-proceso anc1"> (Obie klasy zawarte na każdym Div Start od section- i anc, w razie potrzeby można dodać mrówka nowa klasa)

DEMO NA ŻYWO

Wypróbowałem takie rzeczy, bez tego wyniku:

if ($("div[class^='anc']").offset().top >= $('.contentPanel').offset().top){
   alert($(this).attr('class'));
}
2
Biomehanika 18 sierpień 2014, 10:09

2 odpowiedzi

Najlepsza odpowiedź

Użyj tego:

$(".contentPanel").scroll(function () {
    $("div[class*='anc']").each(function() {
        $this = $(this);
        var TopView = $('.contentPanel').offset().top;
        var TopElement = $this.offset().top;
        if (TopElement <= TopView && !$(this).hasClass('Appear')){
            $(this).addClass('Appear');
            alert($(this).attr('class'));
        }

        if (TopElement >= TopView && $(this).hasClass('Appear')){
            $(this).removeClass('Appear');
            alert($(this).attr('class'));
        }
    });
});

Nigdy nie widzisz alert, ponieważ w ostatniej części, ponieważ wspomniasz o tym, że "gdy jakikolwiek treści Div Top osiągnie górną część panelu, alarm, który pojawi się w klasie Div." A górna część ostatniej sekcji nigdy nie dociera do góry panelu.

Uwaga: klasa Appear służy do zapobiegania powtarzającym się alertem na każdym przewijaniu, widać alert tylko po osiągnięciu sekcji, a po osiągnięciu końca sekcji Appear została usunięta, więc Widzisz alert tylko po osiągnięciu sekcji od góry lub dołu i nie widzisz wielokrotnego denerwującego alertu podczas przewijania sekcji formularz do w dół lub do tyłu.

Sprawdź demo jsfiddle

1
Moshtaf 18 sierpień 2014, 07:49
  1. Musisz wystrzelić kod za każdym razem, gdy przewijanie się dzieje, więc umieść go do przewijania kontenera.
  2. W selektorze sprawdzasz atrybut klasy, który ma wartości, takie jak section-proceso anc1, section-proceso anc2 i tak dalej. żaden z którego zaczyna się od "anc". Więc albo masz zamiar zmienić je na anc1 section-proceso lub użyj selektora contains (*).
  3. W przypadku DIV do osiągnięcia do góry lub powyżej pojemnika użyj "mniejsze lub równe" (<=), a nie "większe lub równe" (>=).

Spróbuj tego:

$(function(){
    $(".contentPanel").scroll(function(){
        $("div[class*='anc']").each(function(){
            if ($(this).offset().top <= $('.contentPanel').offset().top)
               console.log($(this).attr('class'));
        });
    });
});

Fiddle: http://jsfiddle.net/nycke/5009/

1
Ganesh Jadhav 18 sierpień 2014, 06:46