允許一列滾動到內容結束，然後保持不變

Question

我的html內容中有兩列。第一列是側欄，預計內容有限，而第二列是實際內容，可以是幾頁的長度。

我想要實現的是這樣的：當我滾動頁面時，我希望第一列滾動，直到第一列內容的末尾可見爲止，此時它不應該進一步滾動當我向下滾動時。第二列應該一直滾動，因爲第一列修復了上述點。注意：當他們滾動時，我需要兩列滾動而不是獨立。

我試過使用position：fixed與overflow-y：auto，但這似乎不起作用。請在這裏參考的的jsfiddle：http://jsfiddle.net/a1qn17gw/1/

爲了說明，我想達到以下爲我向下滾動頁面：

Answer 1

我希望這可以幫助你

的CSS

.fixed-content { 
    position: fixed; 
    overflow-y: hidden; 
    width: 250px; 
    color: red; 
    height: 100vh; 
} 

jQuery的

jQuery(document).ready(function($) { 
    $(window).scroll(function(event) { 
     $('.fixed-content').scrollTop($(this).scrollTop()); 
    }); 
}); 

確保您已經添加了jQuery庫

Answer 2

究竟是什麼你目前正試圖才達到？

.fixed-content {position:fixed; top:0; left:0; width:20%; height:100%; overflow:auto;} 

Answer 3

我看了你的要求，想出了下面的代碼，我改變了定位，並添加了一些jQuery查看窗口滾動事件。

$(window).bind('scroll', function() { 
 
\t \t var windowScrollHeight = $(window).scrollTop() 
 
\t \t var scrollPlusWindowHeight = $(window).scrollTop() + $(window).height(); 
 
    var fixedContentHeight = $(".fixed-content").height(); 
 
    if(scrollPlusWindowHeight > fixedContentHeight){ 
 
     \t $(".fixed-content").addClass("fixed"); 
 
    }else{ 
 
     \t $(".fixed-content").removeClass("fixed"); 
 
    } 
 
});

.fixed-content { 
 
    position: absolute; 
 
    width: 250px; 
 
    color: red; 
 
} 
 
.fixed { 
 
    position:fixed; 
 
    bottom:0; 
 
} 
 
body{ 
 
    margin:0px; 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
.scrollable-content { 
 
    position: absolute; 
 
    margin-left: 300px; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clearfix"> 
 
<div class="fixed-content"> 
 
Afghanistan<br> 
 
Albania<br> 
 
Algeria<br> 
 
Andorra<br> 
 
Angola<br> 
 
Antigua & Deps<br> 
 
Argentina<br> 
 
Armenia<br> 
 
Australia<br> 
 
Austria<br> 
 
Azerbaijan<br> 
 
Bahamas<br> 
 
Bahrain<br> 
 
Bangladesh<br> 
 
Afghanistan<br> 
 
Albania<br> 
 
Algeria<br>br> 
 
Armenia<br> 
 
Australia<br> 
 
Austria<br> 
 
Azerbaijan<br> 
 
Bahamas<br> 
 
Bahrain<br> 
 
Bangladesh<br> 
 
Afghanistan<br> 
 
Albania<br> 
 
Algeria<br> 
 
Andorra<br> 
 
Angola<br> 
 
Antigua & Deps<br> 
 
Argentina<br> 
 
Armenia<br> 
 
Australia<br> 
 
Austria<br> 
 
Azerbaijan<br> 
 
Bahamas<br> 
 
Bahrain<br> 
 
Bangladesh<br> 
 
Barbados<br> 
 
Belarus<br> 
 
Belgium<br> 
 
Belize<br> 
 
Benin<br> 
 
Bhutan<br> 
 
Bolivia<br> 
 
Bosnia Herzegovina<br> 
 
Botswana<br> 
 
Brazil<br> 
 
Brunei<br> 
 

 
</div> 
 
<div class="scrollable-content"> 
 
Afghanistan<br> 
 
Albania<br> 
 
Algeria<br> 
 
Andorra<br> 
 
Angola<br> 
 
Antigua & Deps<br> 
 
Argentina<br> 
 
Armenia<br> 
 
Australia<br> 
 
Austria<br> 
 
Azerbaijan<br> 
 
Bahamas<br> 
 
Bahrain<br> 
 
Bangladesh<br> 
 
Barbados<br> 
 
Belarus<br> 
 
Belgium<br> 
 
Belize<br> 
 
Benin<br> 
 
Bhutan<br> 
 
Bolivia<br> 
 
Bosnia Herzegovina<br> 
 
Botswana<br> 
 
Brazil<br> 
 
Brunei<br> 
 
Bulgaria<br> 
 
Burkina<br> 
 
Burundi<br> 
 
Cambodia<br> 
 
Cameroon<br> 
 
Canada<br> 
 
Cape Verde<br> 
 
Central African Rep<br> 
 
Chad<br> 
 
Chile<br> 
 
China<br> 
 
Colombia<br> 
 
Comoros<br> 
 
Congo<br> 
 
Congo {Democratic Rep}<br> 
 
Costa Rica<br> 
 
Croatia<br> 
 
Cuba<br> 
 
Cyprus<br> 
 
Czech Republic<br> 
 
Denmark<br> 
 
Djibouti<br> 
 
Dominica<br> 
 
Dominican Republic<br> 
 
East Timor<br> 
 
Ecuador<br> 
 
Egypt<br> 
 
El Salvador<br> 
 
Equatorial Guinea<br> 
 
Eritrea<br> 
 
Estonia<br> 
 
Ethiopia<br> 
 
Fiji<br> 
 
Finland<br> 
 
France<br> 
 
Gabon<br> 
 
Gambia<br> 
 
Georgia<br> 
 
Germany<br> 
 
Ghana<br> 
 
Greece<br> 
 
Grenada<br> 
 
Guatemala<br> 
 
Guinea<br> 
 
Guinea-Bissau<br> 
 
Guyana<br> 
 
Haiti<br> 
 
Honduras<br> 
 
Hungary<br> 
 
Iceland<br> 
 
India<br> 
 
Indonesia<br> 
 
Iran<br> 
 
Iraq<br> 
 
Ireland {Republic}<br> 
 
Israel<br> 
 
Italy<br> 
 
Ivory Coast<br> 
 
Jamaica<br> 
 
Japan<br> 
 
Jordan<br> 
 
Kazakhstan<br> 
 
Kenya<br> 
 
Kiribati<br> 
 
Korea North<br> 
 
Korea South<br> 
 
Kosovo<br> 
 
Kuwait<br> 
 
Kyrgyzstan<br> 
 
Laos<br> 
 
Latvia<br> 
 
Lebanon<br> 
 
Lesotho<br> 
 
Liberia<br> 
 
Libya<br> 
 
Liechtenstein<br> 
 
Lithuania<br> 
 
Luxembourg<br> 
 
Macedonia<br> 
 
Madagascar<br> 
 
Malawi<br> 
 
Malaysia<br> 
 
Maldives<br> 
 
Mali<br> 
 
Malta<br> 
 
Marshall Islands<br> 
 
Mauritania<br> 
 
Mauritius<br> 
 
Mexico<br> 
 
Micronesia<br> 
 
Moldova<br> 
 
Monaco<br> 
 
Mongolia<br> 
 
Montenegro<br> 
 
Morocco<br> 
 
Mozambique<br> 
 
Myanmar, {Burma}<br> 
 
Namibia<br> 
 
Nauru<br> 
 
Nepal<br> 
 
Netherlands<br> 
 
New Zealand<br> 
 
Nicaragua<br> 
 
Niger<br> 
 
Nigeria<br> 
 
Norway<br> 
 
Oman<br> 
 
Pakistan<br> 
 
Palau<br> 
 
Panama<br> 
 
Papua New Guinea<br> 
 
Paraguay<br> 
 
Peru<br> 
 
Philippines<br> 
 
Poland<br> 
 
Portugal<br> 
 
Qatar<br> 
 
Romania<br> 
 
Russian Federation<br> 
 
Rwanda<br> 
 
St Kitts & Nevis<br> 
 
St Lucia<br> 
 
Saint Vincent & the Grenadines<br> 
 
Samoa<br> 
 
San Marino<br> 
 
Sao Tome & Principe<br> 
 
Saudi Arabia<br> 
 
Senegal<br> 
 
Serbia<br> 
 
Seychelles<br> 
 
Sierra Leone<br> 
 
Singapore<br> 
 
Slovakia<br> 
 
Slovenia<br> 
 
Solomon Islands<br> 
 
Somalia<br> 
 
South Africa<br> 
 
South Sudan<br> 
 
Spain<br> 
 
Sri Lanka<br> 
 
Sudan<br> 
 
Suriname<br> 
 
Swaziland<br> 
 
Sweden<br> 
 
Switzerland<br> 
 
Syria<br> 
 
Taiwan<br> 
 
Tajikistan<br> 
 
Tanzania<br> 
 
Thailand<br> 
 
Togo<br> 
 
Tonga<br> 
 
Trinidad & Tobago<br> 
 
Tunisia<br> 
 
Turkey<br> 
 
Turkmenistan<br> 
 
Tuvalu<br> 
 
Uganda<br> 
 
Ukraine<br> 
 
United Arab Emirates<br> 
 
United Kingdom<br> 
 
United States<br> 
 
Uruguay<br> 
 
Uzbekistan<br> 
 
Vanuatu<br> 
 
Vatican City<br> 
 
Venezuela<br> 
 
Vietnam<br> 
 
Yemen<br> 
 
Zambia<br> 
 
Zimbabwe<br> 
 
</div> 
 
</div>