Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pierwszy wyświetlany element w oknie przeglądarki
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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.

  1. <p><span style="color: red;">@</span>
  2. <script>// <![CDATA[
  3. $( "article" ).mousemove(function( event ) {
  4.  
  5. $( "span" ).text( this.id);
  6.  
  7. });
  8. // ]]></script>
  9. </p>


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.
vonski
To może być pomocne: https://api.jquery.com/offset/
Do tego event scrollowania i .scrollTop():

  1. $(window).on({
  2. 'scroll.Scrolling': function() {
  3. console.log($(window).scrollTop());
  4. }
  5. });
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.

  1. $spa.replaceWith( this.id);

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

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

  1. <div id="1111">div 1</div>
  2. <div id="aaa">div 2</div>
  3. <div id="2343">div 3</div>
  4. <div>div 4</div>
  5. <div>div 5</div>
  6. <div>div 6</div>
  7. <div id="side"><span>ssd</span></div>
  8. $(window).scroll(function() {
  9.  
  10. var winTop = $(this).scrollTop();
  11. var $divs = $('div');
  12. var $spa = $('span');
  13. var top = $.grep($divs, function(item) {
  14. return $(item).position().top <= winTop;
  15. });
  16.  
  17. $spa.replaceWith($(top).attr( "id" ));
  18. $divs.removeClass('active');
  19. $(top).addClass('active');
  20.  
  21. });
  22.  
  23.  
  24.  
  25.  
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
  1. $spa.replaceWith($(top).last().attr( "id" ));
norbi666
Span wyświetla zawartość id ostatniego diva, w którym jest powyższy span.
trueblue
  1. $(window).scroll(function() {
  2.  
  3. var winTop = $(this).scrollTop();
  4. var $divs = $('div:not(#side)');
  5. var $spa = $('span');
  6. var top = $.grep($divs, function(item) {
  7. return $(item).position().top <= winTop;
  8. });
  9. $spa.text($(top).last().attr( "id" ));
  10. $divs.removeClass('active');
  11. $(top).addClass('active');
  12.  
  13. });

norbi666
Cytat(trueblue @ 28.03.2014, 19:05:32 ) *
  1. $(window).scroll(function() {
  2.  
  3. var winTop = $(this).scrollTop();
  4. var $divs = $('div:not(#side)');
  5. var $spa = $('span');
  6. var top = $.grep($divs, function(item) {
  7. return $(item).position().top <= winTop;
  8. });
  9. $spa.text($(top).last().attr( "id" ));
  10. $divs.removeClass('active');
  11. $(top).addClass('active');
  12.  
  13. });


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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.