ページが最後までスクロールされたときにコンテンツの下に留まるスティッキーボタン

Question

ウィンドウが最後までスクロールされてからコンテンツの最後までスティックされる前に、同じ位置のコンテンツ上に浮かぶボタンを実装する必要があります。

つまり、指定された位置に到達するまで、要素はrelativeとして動作しました。この位置から開始する動作はfixedに変更されました。

私はこれを行うためのCSSの方法を探しています。それとも、スタイルシートでは不可能なjavascriptのソリューションです。

期待される結果：

コンテンツブロックは、指定された位置の下にある：

そして、それは最後に到達するときに初期位置は、その下縁の下にある：

Answer 1

最新のブラウザでは、position: stickyをsticに使用できますkが上（または下）に達すると、

スティッキーポジショニングは相対配置と固定配置のハイブリッドです。要素は指定されたしきい値を超えるまで相対的な位置として扱われ、固定された位置として処理されます。

続きを読む。 （source）をサポート

.sticky-button { 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    position: -moz-sticky; 
 
    position: -ms-sticky; 
 
    position: -o-sticky; 
 
    bottom: 10px; 
 
}

<div style='width: 500px; height: 3000px; background: #ffffcc; padding: 20px'> 
 
    <div style='width: 500px; height: 2000px; background: #eeffff; padding: 20px'> 
 
    Page content 
 
    </div> 
 
    <button class='sticky-button'>Load more...</button> 
 
</div>

ブラウザ：

残念ながら、この1のための明確な仕様はありません - 機能がちょうどWebkitのに上陸し、そこにされますいくつかの既知の問題です。しかしボタンのためにそれはうまく動作します

Answer 2

これを行うライブラリをgoogleしてみてください。

コンセプトは簡単ですが、すべてのブラウザと互換性があります。

あなたは知っておく必要があります。

1.elementの高さ：

element.style.height 

2.window高さ：

window.innerHeight 

3.windowスクロールPOS：

document.body.scrollTop 

それはすべてのパラメあなたが必要とするもの。私はこれを行うためのライブラリーを見つけるためにしようと、再び

https://jsfiddle.net/t7j726c1/

：ここ

は、私はちょうど作っ迅速フィドルです。