2016-03-04 164 views
10

正如標題所述,我試圖讓我的網站的一面滾動,另一面留下。我發現,不正是我想要的例子:如何使頁面右側的滾動和左側不是?

http://melaniedaveid.com/

如果向下滾動該網站上的一點,你會看到左側有「約」將停滯不前,右側如果向下滾動,文字將向下滾動。有沒有人有任何想法如何做到這一點?

到目前爲止,我只有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; 

}

只要我它開始工作了 「家」 的部分刪除。但是現在我仍然希望能夠使用那個「家」部分。有沒有人有一個想法,我可以如何使用這兩個部分,仍然使用滾動的一面?

的jsfiddleLink

+0

保持左側的位置是:固定在CSS –

+0

這看起來很有趣我已經添加撥弄你的問題。 – Sandeep

+0

你必須檢測scrollTop,並固定左div的位置,並在以後滾動整個右div,你需要改變左div的位置屬性 – RRR

回答

0

希望這對您有所幫助。謝謝。

.aboutTitle { 
 
display: table-cell; 
 
background-color: red; 
 
float: left; 
 
width: 50%; 
 
height: 100%; 
 
position:fixed; 
 
} 
 

 
.aboutText { 
 
display: table-cell; 
 
background-color: orange; 
 
float: left; 
 
width: 50%; 
 
height: 100%; 
 
position:absolute; 
 
right:0px; 
 
}
<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>

+0

我很抱歉,但我已經使用了你的代碼,它似乎沒有按照你的代碼片段的工作方式工作。這就是現在的樣子:http://prntscr.com/ab2t6p任何想法爲什麼我的工作不像你的代碼片段? – maxgeraci

+0

等待一段時間。我正在嘗試製作與網站相同的內容以供參考。我對任何經驗人士都沒有太多的關於jquery的知識。一旦我完成了。我會發布它。謝謝。 –

+0

我發現了這個問題,但我現在偶然發現了另一個問題。我會編輯我的文章,以便您可以看到。 – maxgeraci

2

要執行高級效果至極跟蹤滾動條的位置,你需要jQuery的。如果你想要一個沒有這個效果的簡單版本的分割頁面,這裏是:

讓body margin等於零。然後,將頁面劃分爲2個div,分別爲width: 50%;height: 100%,最後將overflow-y: scroll添加到第二個div。

- codepen

- jsfiddle

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
#a, #b { 
 
    box-sizing: border-box; 
 
    padding: 50px; 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 100%; 
 
    vertical-align: top; 
 
} 
 

 
#a { 
 
    background: tomato; 
 
} 
 

 
#b { 
 
    text-align: justify; 
 
    background: honeydew; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
#aboutimg { 
 
position: absolute; 
 
top: 20px; 
 
left: 0; 
 
right: 0; 
 
margin: auto; 
 
}
<img src="http://i.imgur.com/q0NYMxY.png" alt=about id=aboutimg> 
 
<div id=a><span style="font-size: 1.3em">About:</span></div><div id=b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.<br><br> 
 

 
Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.<br><br> 
 

 
Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.<br><br> 
 

 
Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.<br><br> 
 

 
Nullam porta urna quis mauris. Aliquam erat volutpat. Donec scelerisque quam vitae est. Aenean vitae diam at erat pellentesque condimentum. Duis pulvinar nisl sed orci. Vivamus turpis nisi, volutpat in, placerat et, pharetra nec, eros. Suspendisse tellus metus, sodales non, venenatis a, ultrices auctor, erat. In ut leo nec elit mattis pellentesque. Sed eros elit, cursus accumsan, sollicitudin a, iaculis quis, diam. Pellentesque fermentum, pede a nonummy varius, ligula velit laoreet erat, et lacinia nibh nulla sit amet nunc. Suspendisse at turpis quis augue pellentesque pretium. Nunc condimentum elit semper felis.<br><br> 
 

 
Duis imperdiet diam pharetra nisi. Fusce accumsan. Fusce adipiscing, felis non ornare egestas, risus elit placerat mauris, in mollis ante erat quis nisi. Quisque sed ipsum. Nulla facilisi. Donec arcu erat, sodales quis, cursus eget, posuere eget, tellus. Vestibulum eu risus. Curabitur adipiscing, odio in pretium feugiat, nulla magna vehicula lorem, at placerat tortor nisl eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse mollis fermentum massa. </div>

+0

有沒有辦法讓滾動工作,而你的鼠標也在左邊的div內?到目前爲止,只有當鼠標懸停在正確的div上時,才能向下滾動文本。 – maxgeraci

+0

查看我剛剛發佈的新答案; –

0

有趣上週在做同樣的事情後,發現這一錯誤。

我使用嵌套的彈性盒來實現這一點。這是我用於彈出地圖的非常精簡的版本。通過一些工作,您還可以重新安排手機甚至平板電腦,但我會將其留給您。

CSS

#container { 
    display: flex; 
    flex-flow: column nowrap; 
    align-items: stretch; 
    width: 600px; 
    height: 340px; 
} 
#header { 
    flex: 0 0 auto; 
    height: 35px; 
    background-color: orange; 
    border-bottom: 2px solid #CCC; 
} 
#content { 
    display: flex; 
    flex-flow: row norwap; 
    align-items: stretch; 
    min-height: 0; 
} 
#navbar { 
    flex: 0 0 auto; 
    padding: 10px 20px 10px 0px; 
    border: 1px solid blue; 
} 
#main { 
    flex: 1 1 auto; 
    border: 1px solid red; 
    display: flex; flex-flow: 
    column nowrap; 
    align-items: stretch; 
} 
#map { 
    flex: 0 0 auto; 
    width: auto; 
    height: 100px; 
    background-color: blueviolet; 
} 
#desc { 
    flex: 1 1 auto; 
    overflow-y: auto; 
    padding: 10px; 
} 

HTML

<html> 
<head> 
<title>Super Nested Flexbox Example</title> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
     <div id="navbar"> 
      <ul> 
       <li>Douglas Adams</li> 
       <li>Sarah Jane Smith</li> 
       <li>Patrick Thourton</li> 
       <li>Oscar Wilde</li> 
      </ul> 
     </div> 
     <div id="main"> 
      <div id="map"></div> 
      <div id="desc"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sem maximus, lobortis lacus ut, finibus enim. Donec diam dolor, fermentum sit amet elementum vitae, congue ut lectus. Nullam maximus neque nisl, eu tristique mi accumsan elementum. Phasellus quis nulla urna. Phasellus nec mauris maximus, elementum ante id, tristique velit. Praesent luctus placerat aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae turpis ut metus lobortis aliquet. Cras sollicitudin tempus hendrerit. Quisque rhoncus eleifend ex, at finibus elit ultrices nec. Fusce tincidunt diam eu nisi iaculis vestibulum. Suspendisse potenti. Cras facilisis lobortis nunc quis faucibus. Vestibulum aliquet nulla ac tortor molestie, a cursus mi tincidunt. Proin faucibus dictum est, sit amet convallis elit convallis in. 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

注使用 「最小高度:0;」這是FireFox實施Flexbox所必需的。

希望這會有所幫助!

1

這是我對這個問題的第二個答案。目標是讓滾動工作,即使鼠標位於左側框上方。與早期版本不同,帶有內容的div在右側沒有滾動條。其內容隨頁面滾動條一起滾動。爲了避免頁面滾動條也達到了第一個div,它被設置與position:fixed

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
#a, #b { 
 
    box-sizing: border-box; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
    padding-right: 50px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
#a { 
 
    padding-left: 50px; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: tomato; 
 
    width: 50%; 
 
} 
 

 
#b { 
 
    padding-left: calc(50% + 50px); 
 
    text-align: justify; 
 
    background: honeydew; 
 
    width: 100%; 
 
} 
 

 
#aboutimg { 
 
position: fixed; 
 
top: 20px; 
 
left: 0; 
 
right: 0; 
 
margin: auto; 
 
z-index: 100; 
 
}
<img src="http://i.imgur.com/q0NYMxY.png" alt=about id=aboutimg> 
 
<div id=a><span style="font-size: 1.3em">About:</span></div><div id=b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.<br><br> 
 

 
Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.<br><br> 
 

 
Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.<br><br> 
 

 
Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.<br><br> 
 

 
Nullam porta urna quis mauris. Aliquam erat volutpat. Donec scelerisque quam vitae est. Aenean vitae diam at erat pellentesque condimentum. Duis pulvinar nisl sed orci. Vivamus turpis nisi, volutpat in, placerat et, pharetra nec, eros. Suspendisse tellus metus, sodales non, venenatis a, ultrices auctor, erat. In ut leo nec elit mattis pellentesque. Sed eros elit, cursus accumsan, sollicitudin a, iaculis quis, diam. Pellentesque fermentum, pede a nonummy varius, ligula velit laoreet erat, et lacinia nibh nulla sit amet nunc. Suspendisse at turpis quis augue pellentesque pretium. Nunc condimentum elit semper felis.<br><br> 
 

 
Duis imperdiet diam pharetra nisi. Fusce accumsan. Fusce adipiscing, felis non ornare egestas, risus elit placerat mauris, in mollis ante erat quis nisi. Quisque sed ipsum. Nulla facilisi. Donec arcu erat, sodales quis, cursus eget, posuere eget, tellus. Vestibulum eu risus. Curabitur adipiscing, odio in pretium feugiat, nulla magna vehicula lorem, at placerat tortor nisl eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse mollis fermentum massa. </div>

+0

我仍然遇到與之前相同的問題。我想在#a和#b之上添加另一個div。但是,一旦我添加div,它會因爲「位置:固定」的東西而弄亂#a。 – maxgeraci

+0

我非常想和我在帖子中鏈接的網站一樣。它以內部名字大的手開始,當您向下滾動時,它會將您帶到只有正確的div可以向下滾動的分屏。 – maxgeraci

+0

這對我來說是新的,我沒有看到它在這個問題上解釋。 –

相關問題