Tak jak wskazuje tytuł, staram się przewracać stronę z jednej strony, a druga pozostać. Znalazłem przykład, że robi dokładnie to, co chcę:Jak zrobić prawą stronę przewijania strony i lewą stronę nie?
Jeśli przewinąć kawałek na tej stronie widać, że lewa strona z „o” będzie stać, a prawa strona z tekstem zostanie przewinięty w dół, jeśli przewiniesz w dół. Czy ktoś ma jakiś pomysł, jak to zrobić?
Do tej pory mam tylko 2 elementy div, które znajdują się obok siebie.
<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 jego rozwiązanie działało w porządku dla mnie. 1 rzeczy, której nie uwzględniłem w moim oryginalnym wpisie, ponieważ nie sądziłem, że jest to ważne w tym przypadku, było to, że mam inną sekcję powyżej mojej sekcji "o".
<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;
}
Jak tylko usuwa sekcję "domowy" zaczęło działać. Ale oczywiście nadal chcę móc korzystać z tej sekcji "domowej". Czy ktoś ma pomysł, jak mogę korzystać z obu sekcji i nadal korzystać z przewijania na jednej stronie?
JSFiddle: Link
trzymać lewą stronę jak position: fixed w css –
To wygląda interesujący dodałem skrzypce do Twojego pytania. – Sandeep
musisz wykryć scrollTop i ustawić lewą pozycję div, a później po przewinięciu całego prawego div musisz zmienić atrybut pozycji lewego diva – RRR