2015-06-09 32 views
0

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

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

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將停止滾動到列表底部,如果它長於屏幕。

+0

如果你設置'位置:fixed'但沒有設置'top'值'ul'將留在其原來放置:https://jsfiddle.net/ 3a0575fu/1 /。那是你要的嗎? –

+0

注意很.. https://jsfiddle.net/3a0575fu/14/顯示當兩個列表都相當日誌會發生什麼..你不能長期向下滾動在右邊列表 – Tom

+0

任何一個任何其他的想法呢? – Tom

回答

0

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

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

試試這個更新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>

+0

請描述您對問題代碼所做的更改,並將修改內容包含在答案中。 –

+0

請參閱我原來的問題的更新。 – Tom

+0

@Rory McCrossan我只更新了JSFiddle,因爲之前的小提琴工作得很好,但是當滾動到頂部時,它用來改變位置,但是這很有效。 –