フッターに達したときに固定領域をスクロールする方法は？

Question

CSSで以下の設定を行うことは可能ですか？私は限り私は底に常にあることを一定の面積を必要とするページの可視領域で底にフッターを持つ長いページ（フッタ表示プロパティがフレックスである）

を持って

• スクロールはフッターに達していません。

1. 固定領域はである：スクロールがフッターに達すると

2. 、固定領域には、次のスクリーンショットのようにフッターの上にあることをスクロールアップする必要がありページの可視領域の下部。

3. スクロールするとフッタに達していない場合は、フッターに達するとページ

4. の底に残りますが、固定位置はフッターの上にある固定

は、私のような何かを試してみました：

FixedArea { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 

を私はフッターまでスクロールすると、固定領域が消えます。

Answer 1

例を作成しました。試してみてください：https://jsfiddle.net/pvviana/wwc8LgLm/

ページの下部にあるdiv CSSプロパティの "position"を変更しています。

コード：

<div class="foo">Hello</div> 
<footer>OKAY</footer> 

のJavascript（jQueryの）：

var $logo = $('.foo'); 
$(document).scroll(function() { 
    $logo.css({position: $(this).scrollTop()>100 ? "relative":"fixed"}); 
}); 

のCss：

.foo { 
    position: fixed; 
    bottom: 0px; 
} 

Answer 2

することはできている要素内の固定されたコンテンツを持つボディコンテンツ一緒に巣その上にheight: 100vhがあり、そのページの実際の内容にはoverflow: autoがあります。こうしてt彼は内容を固定要素とは無関係にスクロールし、最後に達すると本文のスクロールはページの最後まで続きます（フッター）