Div che diventi "fixed" quando ha finito di scorrere

**sedaker** · 23-05-2012, 18:09

Salve a tutti, non so bene come potrei spiegare ciò che voglio fare: in pratica ho una barra laterale e vorrei che rimanesse ferma. E fin qui nessun problema, position: fixed; il guaio insorge nel momento in cui uno visita il sito con la pagina non abbastanza "lunga" da poter visualizzare tutta la barra. Quello che vorrei fare quindi è far scorrere in giù la barra fino a quando non finisce il suo contenuto e poi farla diventare fissa.
Non so se mi sono spiegato e se ho posto la discussione nella sezione giusta...
Sebastiano

**Vincent.Zeno** · 23-05-2012, 21:37

Originariamente inviato da sedaker
il guaio insorge

... questi maledetti guai rivoluzionari!

credo tu debba spiegare meglio anche con qualche esempio pratico
intanto sposto su css

**Mich_** · 24-05-2012, 08:24

Una soluzione e` far scorrere separatamente la colonna laterale e il resto della pagina.

Se questa soluzione non ti piace, si possono trovare altre soluzioni, probabilmente un po' piu` complesse (e ci sono anche soluzioni che utilizzano JS).

Comunque un minimo di codice lo dovresti postare (usa i tag CODE del forum !!), oppure un link alla pagina dove stai facendo le prove; in caso contrario le soluzioni che ti arrivano sono generiche (come questa che ti ho dato io)

**sedaker** · 24-05-2012, 14:18

grazie, ora metto il codice:

in sintesi il div "sinistra" dovrebbe scorrere normalmente, il div "destra" soltanto fino a quando non finisce...

CSS

codice:

#sinistra {  width: 200px;  float: left; } #destra {  width: 200px;  float: right;  position: fixed;  top: 0px; }

codice:

<div id="sinistra">  <div id="articolo">   

ciao ciao ciao</p>  </div> </div> <div id="destra">  

ciao ciao ciao</p> </div>

**Mich_** · 24-05-2012, 14:55

Ma perche` non formatti in modo umano?

Vedi questa formattazione e questa proposta (che rispecchia quanto da me proposto)

codice:

CSS
html, body {
  width: 100%;
  height: 100%;
}
#sinistra {
  width: 200px;
  height: 100%;
  float: left; 
  overflow: auto;
  background: #800;
}
#destra {
  width: 200px;
  height: 100%;
  float: right;
  overflow: auto;
  background: #080;
}
#articolo {
  background: #c00;
}
#des_int {
  background: #0c0;
}


HTML:
<body>
  <div id="sinistra">
    <div id="articolo">
      

ciao ciao ciao</p>
    </div>
  </div>

  <div id="destra">
    <div id="des_int">
      

ciao ciao ciao</p> 
    </div>
  </div>
</body>

Discussione: Div che diventi "fixed" quando ha finito di scorrere

Strumenti discussione

Ricerca discussione

Visualizza

Div che diventi "fixed" quando ha finito di scorrere

Re: Div che diventi "fixed" quando ha finito di scorrere

Permessi di invio