正如標題所述,我試圖讓我的網站的一面滾動,另一面留下。我發現,不正是我想要的例子:如何使頁面右側的滾動和左側不是?
如果向下滾動該網站上的一點,你會看到左側有「約」將停滯不前,右側如果向下滾動,文字將向下滾動。有沒有人有任何想法如何做到這一點?
到目前爲止,我只有2個div是彼此相鄰的。
<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%;
}
編輯:
薩加爾Kodte他的解決方案爲我工作的罰款。 1件事我沒有在我的原始文章中包含,因爲我認爲這種情況並不重要,因爲我在「約」部分上方有另一節。
<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;
}
只要我它開始工作了 「家」 的部分刪除。但是現在我仍然希望能夠使用那個「家」部分。有沒有人有一個想法,我可以如何使用這兩個部分,仍然使用滾動的一面?
的jsfiddle:Link
保持左側的位置是:固定在CSS –
這看起來很有趣我已經添加撥弄你的問題。 – Sandeep
你必須檢測scrollTop,並固定左div的位置,並在以後滾動整個右div,你需要改變左div的位置屬性 – RRR