Apparizione e scomparsa div in base allo scroll pagina

  • Creatore Discussione Creatore Discussione otto9due
  • Data di inizio Data di inizio
Stato
Chiusa ad ulteriori risposte.

otto9due

Utente Attivo
22 Feb 2014
591
25
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>
 
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>
 
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
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
 
Non riesumiamo discussione del 2016 grazie
 
Stato
Chiusa ad ulteriori risposte.

Discussioni simili