html - スティッキー div 固定位置

Question

これが私のhtml作品です。http://jsfiddle.net/awaises/remqf/4/

div固定ボックスを画面下に押し込みたい。しかし、左側のナビゲーションで重なっており、ナビゲーションの最後の項目が緑色のボックスの後ろに隠れています。緑色のボックスを次の設計に従って修正できますか? ただし、ウィンドウの解像度が小さくても大きくても、緑色のボックスが画面の下部にあることを確認する必要があります。

デザインレイアウトURL http://www.thewebmakerz.com/screen.jpg

Answer 1

画面 1.1 を見ると、黄色のボックスに 11 番目のリストがある場合、必ず緑色のボックスの後ろに移動します。(ブラウザのツールバー/メニュー バーも考慮してください)。画面の高さが低い場合は、「More Links >」のようなものを使用する必要がある場合があります。

画面 1.2 以降: jQuery がオプションの場合、scrollTop 関数を使用できます。最初に、緑色のボックスを position:fixed で固定し、マージンを下から負にします。次に、ユーザーが特定の量までスクロールしたら (画面 1.2 を参照)、次の jQuery コードを試してください。

var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
  if ($document.scrollTop() >= yellowBoxHeight - 100) {
    // If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
    // make the green box animate & let it come upwards
  } else {
   // put the green-box back with some negative margin into the bottom
  }
});

Answer 2

このフィドルを参照してください。

3 つの重要なヒント:

1. 「左フッター」をメニュー コンテンツとは別の親に配置します (「左列トップ」と呼ばれます)。
2. "left-col-top" は透明、"position:fixed"、"z-index:1"、メニューよりも高い min-height である必要があります。
3. 「左フッター」は「position:absolute」にする必要があります。

Answer 3

これ.left-col{ height:500px;}で問題は解決しましたか?