cambio posizionamento on scroll

[jimbo0]

Salve, ho scritto questo codice per cambiare il posizionamento di un div on scroll (il classico menu fixato in alto), ho due domande:
- posso fare in modo che il cambio di posizione sia animato? cercando sul web mi pare di capire che non sia così immediata la cosa
- come posso fare in modo che questo codice sia valido solo per utenti desktop (in altre parole, il div#Mod97 deve avere sempre position:static in view mobile, non mi serve che sia fixed)?

$(window).scroll(function(){        if($(window).scrollTop() > elementPosition.top){
            $('#Mod97').css('position','fixed').css('top','50px');
        } else {
            $('#Mod97').css('position','static');
        }    
});
});

Ho provato a modificare l'if in questo modo, sembra non vada per nulla..

if( $(window).scrollTop() > elementPosition.top &&  $(window).width()>767)

per il secondo quesito, voglio evitare l'handler window.resize() che appesantisce il carico cpu del client in maniera indecente, ed è chiaro che per questa piccolezza non ne vale la pena.

[lucavizzi]

Ciao jimbo,
Per animare puoi usare, sorpresa sorpresa, animate()

$(window).scroll(function(){        
        if($(window).scrollTop() > elementPosition.top){
            $('#Mod97').css('position','fixed').animate({top:50});
        } else {
            $('#Mod97').css('position','static');
        }
});

Per quanto riguarda i dispositivi mobili, puoi usare una media query

@media (max-width: 767px) {
   #Mod97{
      position:static !important;
   }
}

Nota "!important", impedirà a javascript di alterare quella regola (se la finestra è più piccola di 767px) e la ripristinerà se da una "finestra" maggiore di 767px effettui un "rimpicciolimento".

Potresti anche usare una funzione javascript che verifica l'user-agent (il device) utilizzato:

function is_Mobile(){
 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  return true;
 }
 return false;
}

$(window).scroll(function(){        
        if($(window).scrollTop() > elementPosition.top && !is_Mobile()){
            $('#Mod97').css('position','fixed').animate({top:50});
        } else {
            $('#Mod97').css('position','static');
        }
});

Questo secondo metodo considera solo il tipo di dispositivo e non tiene conto della reale risoluzione, un tablet android con 1024px disponibili verrà comunque considerato un dispositivo mobile. Nel tuo caso specifico credo sia consigliabile la media query.

[jimbo0]

avevo già provato animate(), sembra non funzionare con position
http://stackoverflow.com/questions/1...on-doesnt-work

per quanto riguarda la media query, non so perché ma ero talmente sicuro che una modifica al css via js sovrascrivesse qualsiasi proprietà css (anche con !important) che non avevo neanche provato ora funge

[jimbo0]

no scusa in effetti funziona anche animate(), però c'è ancora qualcosa che non va: scrollando la pagina avanti ed indietro (in modo da cambiare posizion diverse volte), a volte mi trovo con il div con position: fixed; top: 0px;

mi sembra che il problema sia dovuto al fatto che l'animazione non è sul posizionamento, ma su top:50

[lucavizzi]

no scusa in effetti funziona anche animate(), però c'è ancora qualcosa che non va: scrollando la pagina avanti ed indietro (in modo da cambiare posizion diverse volte), a volte mi trovo con il div con position: fixed; top: 0px;

mi sembra che il problema sia dovuto al fatto che l'animazione non è sul posizionamento, ma su top:50

Tieni presente che animate(), a differenza di css(), è un metodo "asincrono".
Per maggiori info dai un'occhiata qui:
https://api.jquery.com/stop/

[jimbo0]

        if(jQuery(window).scrollTop() > elementPosition.top){            jQuery('#Mod104').css('position','fixed').stop( true, true ).animate({top:50},"slow");
        } else {
            jQuery('#Mod104').css('position','static').stop( true, true ).animate({top:0},'slow');
        }

mi sembra che così funzioni, anche se non è che abbia capito per bene lo stop() messo lì quale animazione stoppi.
In ogni caso, l'animazione 'inversa', ossia la transizione da static a fixed non va.. (questione totalmente secondaria, ma sarebbe meglio riuscire a farla andare)