Apparizione e scomparsa div in base allo scroll pagina

Stato
Chiusa ad ulteriori risposte.

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Mi spiego meglio.. Ho screato un piccolo script che mi fa comparire un div, contenente un pulsante, quando
$(this).scrollTop()>=somma da me indicata. Lo script funziona perfettamente, facendomi comparire il div arrivati a quella certa distanza.
Ora però vorrei che:
1) durante lo scrolling della pagina scomparisse per poi ricomparire quando la pagina è ferma ( sempre che siano vere le condizioni di cui sopra [ $(this).scrollTop()>=somma ] )
2) oppure far si che dopo un certo lasso di tempo ( ho provato senza ottenere risultati "setTimeout") scomparisse, per ricomparire una volta riavviato lo scroll.
Ho fatto centinaia di prove, ho provato anche a fare una funzione di callback con setTimeout ma non sono riuscito ad ottenere il risultato sperato.

Ringrazio anticipatamente per la gentile attenzione.

HTML:
<script>
        $(function(){
          $(window).scroll(function(){
            var somma = $(".b-prenota").height() + 600;
            if($(this).scrollTop()>=somma){
                $(".b-prenota").fadeIn("slow");       
            }else{
                $(".b-prenota").hide();
            }
          });
        });
</script>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova questo :
HTML:
<script>
    $(window).scroll(function () {
        clearTimeout($.data(this, 'scrollTimer'));
        $("#fixed").css("display", "none");
        $.data(this, 'scrollTimer', setTimeout(function () {
            $("#fixed").css("display", "block");
        }, 250));
    });
</script>
<div id="fixed" style="padding:22px;font-size: 42px;position: fixed;background-color: blue;color:white;">Ciao</div>
<div style="height: 7000px;"></div>
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Il tuo esempio mi ha aperto le porte di un mondo..
Alla fine sono riuscito ad ottenere sia l'effetto timer, ovvero far scomparire il div dopo un certo periodo seguendo le tue indicazioni, che far scomparire un div durante lo scroll e farlo ricomparire quando finisce lo scroll.
Per farlo mi sono ispirato al tuo script, e dovesse servire a qualcun'altro lo posto qui..
HTML:
$(function(){
          $(window).scroll(function(){  
             clearTimeout($.data(this, 'scrollTimer'));      
            var somma = $(".b-prenota").height() + 600;//qui si può inserire anche solo un numero, i px dopo i quali parte tutto
            if($(this).scrollTop()>=somma){
                $.data(this, 'scrollTimer', setTimeout(function () {
                $(".b-prenota").hide();
                }, 100));
                $.data(this, 'scrollTimer', setTimeout(function () {
                $(".b-prenota").fadeIn("slow");
                }, 500));
            }else{
                $(".b-prenota").hide();
            }
        });
    });

Ovviamente Grazie come sempre per il vostro tempo!!
Saluti G.G.
 
  • Like
Reactions: criric

enzo7903

Nuovo Utente
27 Feb 2020
2
0
1
Ciao otto9due,
A me in realtà mi servirebbe molto più semplice, cioè farlo scomparire quando fai scroll, e non farlo ricomparire più ma solo quando la pagina viene ricaricata.
Ciao grazie
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
Non riesumiamo discussione del 2016 grazie
 
Stato
Chiusa ad ulteriori risposte.
Discussioni simili
Autore Titolo Forum Risposte Data
H Cartella Programdata scomparsa. Windows e Software 0
filippino Problema AdSense : Scomparsa banner sidebar SOLO in un paio di articoli Google AdSense 0
P tabella scomparsa in pagina php su server nginx PHP 1
G Elementi a scomparsa Java 2
andreaco Problema menù a scomparsa laterale HTML e CSS 10
P form con label a scomparsa Javascript 4
W Menù a scomparsa HTML e CSS 2
E Homepage scomparsa da Goolge SEO e Posizionamento 3
A scomparsa di un file Mac e Software 1
K Menu orizzontale a scomparsa jQuery 0
S "Menu" laterale a scomparsa (stile Forumcommunity) HTML e CSS 1
C Campi del FORM a Scomparsa/Comparsa Automatica Javascript 1
F Imageslider con testo a scomparsa mouseover Javascript 2
O scomparsa visualizzazione codec dai dettagli Windows e Software 1
J Php/Javascript div a scomparsa Javascript 2
S problema con div a scomparsa jquery jQuery 0
L Comparsa e Scomparsa DIV Javascript 0
M Devo inserire un menu a scomparsa ma non riesco a gestirlo Javascript 0
E Barra comandi Excel scomparsa Windows e Software 7
B text area a scomparsa Javascript 0
S icona videochiamata scomparsa su msn Windows e Software 1
P menu a scomparsa Flash 1
P menu a scomparsa Flash 3
B Scomparsa barre in Word Windows e Software 1
P Menu a scomparsa dentro livello HTML e CSS 1
J Menu a scomparsa nei frame Javascript 0
J Menu a scomparsa Javascript 2
C Barra Laterale Scomparsa! Javascript 7
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12

Discussioni simili