Così come dice il titolo, sto cercando di far scorrere un lato del mio sito web, e l'altro lato rimane. Ho trovato un esempio che fa esattamente quello che voglio:Come far scorrere il lato destro della pagina e il lato sinistro no?
Se si scorre verso il basso un po 'su quel sito si vedrà che il lato sinistro con il "circa" si fermerà e il lato destro con il testo scorrerà verso il basso se scorri verso il basso. Qualcuno ha qualche idea su come farlo?
Finora ho solo 2 div che si trovano l'uno accanto all'altro.
<section class="about">
<div class="aboutTitle">
about
</div>
<div class="aboutText">
<p style="font-size: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
.aboutTitle {
display: table-cell;
background-color: red;
float: left;
width: 50%;
height: 100%;
}
.aboutText {
display: table-cell;
background-color: orange;
float: left;
width: 50%;
height: 100%;
}
EDIT:
Sagar Kodte sua soluzione ha funzionato bene per me. Una cosa che non ho incluso nel mio post originale, perché non pensavo fosse importante in questo caso, era che ho un'altra sezione sopra la mia sezione "about".
<body>
<section class="home">
Welcome
</section>
<section class="about">
<div class="aboutTitle">
about
</div>
<div class="aboutText">
<p style="font-size: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</body>
.home {
background-color: grey;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
Non appena ho rimosso la sezione "casa" ha cominciato a lavorare. Ma naturalmente voglio ancora poter usare quella sezione "casa". Qualcuno ha un'idea di come posso usare entrambe le sezioni e usare ancora la pergamena da una parte?
JSFiddle: Link
mantenere lato sinistro come position: fixed in css –
Questo sembra interessante ho aggiunto violino alla tua domanda. – Sandeep
devi rilevare scrollTop e rendere fissa la posizione del div di sinistra e dopo aver scrollato l'intero div di destra devi cambiare l'attributo di posizione del div di sinistra – RRR