HTML/CSS/jquery滾動問題

Question

作爲昨天關於我的question的後續關於HTML/CSSS列滾動。

這是工作，但我有一個問題，當右列比屏幕高度短，只要我開始滾動該列移動到頁面的底部。

This FIDDLE顯示了我的意思。

jQuery的使用是：

var columnHeight = $('.right').outerHeight(true); 

var windowHeight = $(window).height(); 
$(window).scroll(function() { 

    if ($(this).scrollTop() + windowHeight >= columnHeight) { 
     $('.right').css({ 
      position: 'fixed', 
      top: -(columnHeight - windowHeight) 
     }); 
    } else { 
     $('.right').css({ 
      position: 'static', 
      top: 'auto' 
     }); 
    } 
}); 

我試圖存檔是，如果右列是不是隻要在屏幕上，那麼它應該留在上面。

如果它比屏幕長，那麼它應該滾動，但在到達底部時停止。

如果需要，左欄需要能夠繼續滾動。

希望這是有道理的！ 謝謝

**** UPDATE **** 將右列設置爲FIXED將停止滾動到列表底部，如果它長於屏幕。

Answer 1

你的問題解決了。只需添加位置：固定在你的CSS

.connected.right { 
       min-height:100px; 
       height: 100%; 
       float: left; 
       position:fixed; 
      } 

Answer 2

試試這個更新JSFIDDLE。 我希望這對你有用。只是評論，如果它不。

var columnHeight = $('.right').outerHeight(true); 
 

 
var windowHeight = $(window).height(); 
 
$(window).scroll(function() { 
 

 
    if ($(this).scrollTop() + windowHeight >= columnHeight) { 
 
    $('.right').css({ 
 
     position: 'fixed', 
 
     top: -(columnHeight - windowHeight) 
 
    }); 
 
    } else { 
 
    $('.right').css({ 
 
     position: 'fixed', 
 
     top: 'auto' 
 
    }); 
 
    } 
 
});

.connected { 
 
    min-height: 100px; 
 
    float: left; 
 
    width: 200px; 
 
} 
 
.connected.right { 
 
    min-height: 100px; 
 
    height: 100%; 
 
    float: left; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="0" width="65%"> 
 
    <tr> 
 
    <td valign="top"> 
 
     <ul class="connected" id="new"> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     <li>123</li> 
 
     </ul> 
 
    </td> 
 
    <td valign="top"> 
 
     <ul class="connected right" id="old"> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 
     <li>AAA</li> 
 

 
     </ul> 
 
    </td> 
 
    </tr>