Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    234

    Bloccare un div che segue lo scroll pagina

    Ciao a tutti,
    ho un div che segue lo scroll in questo modo:
    codice:
    jQuery(document).ready(function () {  
    	var el=jQuery('#news_right_cont');
    	var elpos=el.offset().top;
    	var gap=174;
    	jQuery(window).scroll(function () {
    	    var y=jQuery(this).scrollTop();
    	    if(y<elpos){el.stop().animate({'top':174},0);}
    	    else{el.stop().animate({'top':y-elpos + gap},0);}
    	});
    });
    vorrei però che si fermi ad una determinata altezza dal fondo pagina dato che avrei un footer di 465px..

    avrei pensato di creare una variabile visibleFoot e una elheight
    e creare una condizione in questo modo ma senza risultato..
    codice:
    jQuery(document).ready(function () {  
    	var el=jQuery('#news_right_cont');
    	var elpos=el.offset().top;
    	var elheight=el.height();
    	var gap=174;
    	
    	jQuery(window).scroll(function () {
    	    var y=jQuery(this).scrollTop();
    	    var yb=jQuery(this).scrollBottom();
    	    var visibleFoot = 465 - jQuery(this).scrollBottom();
    	    if(y<elpos){el.stop().animate({'top':174},0);}
    	    else if(visibleFoot<elheight){el.stop().animate({'bottom':visibleFoot + "px"},0);}
    	    else{el.stop().animate({'top':y-elpos + gap},0);}
    	});
    });

    Dove sbaglio?
    Grazie

  2. #2

    Re: Bloccare un div che segue lo scroll pagina

    Dovresti calcolare anche l'altezza totale della pagina e sottrarvi l'altezza del footer, per poi far scorrere il div solo nel range: "174" / "valore ricavato dalla sottrazione"

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    234
    grazie dell'intervento Luca
    ho provato ad inserire le variabili window e gap2 ma sto facendo un po di confusione con le condizioni..
    riesci a darmi una mano?
    codice:
    jQuery(document).ready(function () {  
    	var el=jQuery('#news_right_cont');
    	var elpos=el.offset().top;
    	var elheight=el.height();
    	var gap=174;
        var window = jQuery(window);
        var gap2 = window.height() - elheight;
    
    	jQuery(window).scroll(function () {
    	    var y=jQuery(this).scrollTop();
    	    var yb=jQuery(this).scrollBottom();
    	    var visibleFoot = 465 - jQuery(this).scrollBottom();
    	    if(y<elpos){el.stop().animate({'top':174},0);}
    	    else if(visibleFoot<gap2){el.stop().animate({'bottom':visibleFoot + "px"},0);}
    	    else{el.stop().animate({'top':y-elpos + gap},0);}
    	});
    });

  4. #4
    window è una parola riservata, non puoi usarla come nome di variabile, alerta i valori che ricavi per verificare che siano quelli che ti aspetti

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    234
    Ho provato così ma non funziona..

    codice:
    <script type="text/javascript">
    jQuery(document).ready(function () {  
    	var el=jQuery('#news_right_cont');
    	var elPos=el.offset().top;
    	var elHeight=el.height();
    	var gap=174;
        var windoHeight = jQuery(window).height();
        var gap2 = windoHeight - elHeight;
    	alert(elHeight);
    	jQuery(window).scroll(function () {
    	    var y=jQuery(this).scrollTop();
    	    var yb=jQuery(this).scrollBottom();
    	    var visibleFoot = 465 - jQuery(this).scrollBottom();
    	    if(y<elPos){el.stop().animate({'top':174},0);}
    	    else if(visibleFoot<gap2){el.stop().animate({'bottom':visibleFoot + "px"},0);}
    	    else{el.stop().animate({'top':y-elPos + gap},0);}
    	});
    });
    
    </script>

  6. #6
    non esiste la funzione scrollBottom()....

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    234
    ehm.. ecco..

    ho provato in diversi modi ma non riesco proprio..
    calcolo l'altezza della pagina con var page=jQuery(window).height();
    ma non so come calcolare la differenza e creare la condizione..

    codice:
    jQuery(document).ready(function () {  
    	var el=jQuery('#news_right_cont');
    	var elpos=el.offset().top;
    	var page=jQuery(window).height();
    	var margintop=174;
    	var marginbottom=409;
    	var range=page-marginbottom;
    	
    	jQuery(window).scroll(function () {
    	    var y=jQuery(this).scrollTop();
    	    if(y<elpos){el.stop().animate({'top':174},0);}
    	    else{el.stop().animate({'top':y-elpos + margintop},0);}
    	});
    });
    spero che qualcuno mi aiuti

  8. #8
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    234
    up..
    nessuno riesce a trovare una soluzione?

  9. #9
    Originariamente inviato da Protooler
    calcolo l'altezza della pagina con var page=jQuery(window).height();
    ma non so come calcolare la differenza e creare la condizione..
    Dall'altezza totale devi sottrarre l'altezza del footer.
    Originariamente inviato da lucavizzi
    Dovresti calcolare anche l'altezza totale della pagina e sottrarvi l'altezza del footer

  10. #10
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.