2012-01-24 21 views
12

Nella mia pagina aspx, ho due parti sinistra e destra. Voglio mostrare sempre il lato sinistro (che è in realtà un 'div' contenente treeview) mentre si scorre il lato destro (che sono i contenuti effettivi della pagina). GrazieDiv sempre visibile durante lo scorrimento

+0

si prega di selezionare la risposta preferita @M Usman Shafique – Despertaweb

risposta

11

È necessario inserire position: fixed; sull'elemento div. Questo lo ancorerà al viewport.

+0

Grazie, ma sto usando IE7 dove posizione: risolto non funziona –

+4

Dimentica ie7 e versioni precedenti è una perdita di tempo, amico) – Despertaweb

+0

Cosa farai quando l'altezza del div è grande rispetto a viewport. –

1

È necessario impostare la posizione del div su Fixed in CSS. Vedere this link per ulteriori informazioni. Avrai bisogno di impostare la posizione usando la parte superiore e quella sinistra in css e quindi sa dove aggiustarla!

17

Ciao, ho trovato la soluzione migliore! Come sempre JQUERY mi ha salvato la vita !!

Basta mettere un Div chiamato come si wan, ho scelto lo stesso nell'esempio qui sotto: #scrollingDiv.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 

     $(window).scroll(function(){    
      $scrollingDiv 
       .stop() 
       .animate({"marginTop": ($(window).scrollTop())}, "slow");   
     }); 
    }); 
</script> 

Ho preso quel codice da un sito Web, funziona ed è abbastanza facile da capire.

1

Il problema è che quando il blocco si muove, ottiene attenzione e capacità di concentrarsi sulla lettura.

Per rimediare a questa funzione.

Questo codice è perfetto:

(cambiamento "220" e "46px" se necessario)

var $scrollingDiv = $("#scrollingDiv"); 

$(window).scroll(function(){  
if ($(window).scrollTop()>220)  { 
      $scrollingDiv 
       .css("position",'fixed') 
       .css("top",'46px')   
     } else { 
$scrollingDiv 
       .css("position",'')  
       .css("top",'')    
     } 
     }); 
Problemi correlati