Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Ukrycie zawartości po przewinięciu strony
Forum PHP.pl > Forum > Przedszkole
php11
Cześć,

Nie potrafię zrobić, by po przewinięciu strony do momentu pokazania się stopki (#stopka) ukrył się inny, niezależny element. (#ukrywany)

  1.  
  2. jQuery(document).ready(function(){
  3.  
  4. if($'#stopka'.is(':visible')) {
  5. $('#ukrywany').hide();
  6. }
  7.  
  8. });
  9.  


Pomożecie?

Dzięki :-)
gorden
[JAVASCRIPT] pobierz, plaintext
  1. jQuery(document).ready(function(){
  2.  
  3. $('#stopka').one('scroll', function() {
  4. $('#ukrywany').hide();
  5. });
  6.  
  7. });
[JAVASCRIPT] pobierz, plaintext
php11
Dzięki, niestety nie działa.

Konsola pokazuje taki sam błąd, jak w moim kodzie: TypeError: $(...) is null

Może ktoś z Was się nad tym pochyli?
slash^
Wczytaj plik jquery przed plikiem (miejscem) w ktorym inicjujesz ten skrypt
php11
Dziękuję, ale teraz #ukrywany jest cały czas schowany


  1.  
  2. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  3.  
  4. <script>
  5. jQuery(document).ready(function(){
  6.  
  7. if($('#stopka').is(':visible')) {
  8. $('#ukrywany').hide();
  9. }
  10.  
  11. });
  12. </script>


:-(
gorden
Z tego co wyczytałem, nie ma gotowej funkcji na to.
Co do Twojego kodu:
1. Warunek będzie sprawdzany tylko raz, po załadowaniu strony. Musisz powiedzieć skryptowi, żeby sprawdzał to za każdym razem, jak scrollujesz stronę
2. ":visible" zwróci prawdę, nawet jeśli elementu nie ma na ekranie. Element musiałby być ukryty (display: none)


Rozwiązanie
znalazłem taki oto kod:
[JAVASCRIPT] pobierz, plaintext
  1. jQuery.fn.isOnScreen = function(scope){
  2. var element = this;
  3. if(!element){
  4. return;
  5. }
  6. var target = $(element);
  7. if(target.is(':visible') == false){
  8. return false;
  9. }
  10. scope = $(scope || window);
  11. var top = scope.scrollTop();
  12. var bot = top + scope.height();
  13. var elTop = target.offset().top;
  14. var elBot = elTop + target.height();
  15.  
  16. return ((elBot <= bot) && (elTop >= top));
  17. };
[JAVASCRIPT] pobierz, plaintext


Wygląda na to, że działa. Demo: https://jsfiddle.net/cvh1ngx0/1/
php11
Bardzo dziękuję wszystkim za chęć pomocy.
Niestety umiejętności mi brakuje i muszę zrezygnować z tej funkcjonalności...


Dziękuję i pozdrawiam :-)
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.