Pierwszy wyświetlany element w oknie przeglądarki, jQuery Opcje

[norbi666]

Witam, mam problem poszukuje funkcji jQuery/AJAX która pomoże mi ustalić pierwszy widoczny element w oknie przeglądarki.

Nie chodzi o szukanie pierwszego diva w kodzie. Chodzi mi o to jak ktoś ma przewija stronę na sam dół to pierwszy widoczny div na górze ma swój id, który gdzieś na stronie chcę wyświetlić. Mam to zrobione ale na zasadzie najeżdżania kursorem na tych elementach, i pojawia się problem gdy ktoś będzie w całkiem innym miejscu na stronie oraz gdy ktoś przewija suwakiem.

[HTML] pobierz, plaintext 
<p><span style="color: red;">@</span>
<script>// <![CDATA[
$( "article" ).mousemove(function( event ) {
 
  $( "span" ).text( this.id);
 
});
// ]]></script>
</p>
[HTML] pobierz, plaintext 

Nie chciał bym gotowca tylko wskazania którą funkcję powinienem użyć przy tym problemie. W dokumentacji nie mogę znaleźć jasnej odpowiedzi.

ps. Przepraszam jeśli wrzuciłem nie do tego działu.

Ten post edytował norbi666 27.03.2014, 11:22:24

[mar1aczi]

Hmm, jest tego troszkę:
http://www.benknowscode.com/2013/07/detect...ith-jquery.html
http://stackoverflow.com/questions/9026751...olling-viewport
http://css-tricks.com/snippets/jquery/dete...isible-element/

[vonski]

To może być pomocne: https://api.jquery.com/offset/
Do tego event scrollowania i .scrollTop():

[PHP] pobierz, plaintext 
            $(window).on({
                'scroll.Scrolling': function() {
                    console.log($(window).scrollTop());
                }
            });
[PHP] pobierz, plaintext 

[norbi666]

Dzięki @mar1aczi! Twój link trochę mnie na kierował.

Do szedłem do etapu http://jsfiddle.net/CmpEt/243/ i mam problem z podmianą tekstu w span na wartość ID diva.

[HTML] pobierz, plaintext 
$spa.replaceWith( this.id);
[HTML] pobierz, plaintext 

Niestety nie działa, a myślałem ze będzie to prostsze

Dobra kolejny postęp, doszedłem do tego że pobiera mi wartość do span ale tylko z pierwszego diva :/
http://jsfiddle.net/CmpEt/245/

[HTML] pobierz, plaintext 
<div id="1111">div 1</div>
<div id="aaa">div 2</div>
<div id="2343">div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
<div id="side"><span>ssd</span></div>
<script>
$(window).scroll(function() {
 
    var winTop = $(this).scrollTop();
    var $divs = $('div');
    var $spa = $('span');    
    var top = $.grep($divs, function(item) {
        return $(item).position().top <= winTop;
    });
 
    $spa.replaceWith($(top).attr( "id" ));
    $divs.removeClass('active');
    $(top).addClass('active');
 
});
</script>
 
 
 
 
[HTML] pobierz, plaintext 

Ten post edytował norbi666 27.03.2014, 13:57:13

[trueblue]

$.grep zwraca Ci kolekcję wszystkich divów powyższej span.
A attr() zwraca atrybut pierwszego elementu w kolekcji.
Kod działa prawidłowo.

[norbi666]

No dobra, tylko że ja chciałem żeby arrt zwracał id pierwszego widocznego diva. Nie mam pomysłu jak to ugryźć :/

[trueblue]

[HTML] pobierz, plaintext 
$spa.replaceWith($(top).last().attr( "id" ));
[HTML] pobierz, plaintext 

[norbi666]

Span wyświetla zawartość id ostatniego diva, w którym jest powyższy span.

[trueblue]

[HTML] pobierz, plaintext 
$(window).scroll(function() {
 
    var winTop = $(this).scrollTop();
    var $divs = $('div:not(#side)');
    var $spa = $('span');    
    var top = $.grep($divs, function(item) {
        return $(item).position().top <= winTop;
    });
   $spa.text($(top).last().attr( "id" ));
    $divs.removeClass('active');
    $(top).addClass('active');
 
});
[HTML] pobierz, plaintext 

[norbi666]

[HTML] pobierz, plaintext 
$(window).scroll(function() {
 
    var winTop = $(this).scrollTop();
    var $divs = $('div:not(#side)');
    var $spa = $('span');    
    var top = $.grep($divs, function(item) {
        return $(item).position().top <= winTop;
    });
   $spa.text($(top).last().attr( "id" ));
    $divs.removeClass('active');
    $(top).addClass('active');
 
});
[HTML] pobierz, plaintext 

Dzięki Ci trueblue! Dokładnie o to chodziło! Teraz muszę tylko rozwiązać kwestie żeby pobierał id pełnego widocznego diva i będę miał to co potrzebuje.