Итак, как говорится в заголовке, я пытаюсь сделать одну сторону прокрутки своего веб-сайта, а другая сторона останется. Я нашел пример, который делает именно то, что я хочу:
Если вы немного прокрутите страницу на этом веб-сайте, вы увидите, что левая сторона с "около" будет стоять на месте, а правая сторона с текстом прокрутится вниз, если вы прокрутите вниз. Кто-нибудь знает, как это сделать?
До сих пор у меня только 2 divs, которые находятся рядом с eachother.
<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:
Сагар Кодте, его решение отлично работало для меня. 1 вещь, которую я не включил в свой первоначальный пост, потому что я не думал, что это важно в этом случае, было то, что у меня есть другой раздел над моей секцией "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;
}
Как только я удалил раздел "home", он начал работать. Но, конечно, я все еще хочу иметь возможность использовать этот "домашний" раздел. Кто-нибудь есть идея, как я могу использовать оба раздела и все еще использовать свиток с одной стороны?
JSFiddle: Ссылка
