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.275
328
83
Non riesumiamo discussione del 2016 grazie
 
Stato
Chiusa ad ulteriori risposte.