ページ移動しても常時固定表示されているフッター

Question

SoundCloudのようなサイトでページ下部に音楽プレイヤーが固定表示されていますが、あれはどうやって実装しているのでしょうか？
お分かりになる方、ご教授のほど宜しくお願い致します。

Answer 1

リンク先は見ていませんが、AjaxとpushStateを組み合わせた「PJAX」で出来そうな気がします。

すごくざっくり言うと、ページを移動する際にHTMLを読み込みなおし（リンクを押して別HTMLを表示）するのではなく、JavaScriptで次のページを読み込み、必要なところだけを書き換えて表示する技術です。

これであれば音楽を再生したままページを移動することができます。

【pjaxできれいなURL＋非同期画面遷移！ | Headwaters Tech Note】
https://utage.headwaters.co.jp/blog/?p=1165

【jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)】
http://neganin.com/blog/web/jquery-pjax/

【Pjaxでスムーズなページ遷移 | Cubix】
http://chibinowa.net/note/js/pjax-fragment.html

Comments

[gucci_daisuke]

回答ありがとうございます。

こちらで望んでいた仕様に対応できそうです。

自身で調べる範囲では到底辿り着けない内容で、大いに助かりました。
これから参考サイトを参照しつつ、勉強させていただきます。

誠にありがとうございました！

Answer 2

参考情報

• フッターを常に最下部（一番下）に表示する２つの方法 https://webkikaku.co.jp/blog/htmlcss/footer-bottom/

google で "html div 位置 フッター" などで検索すると、情報を得られるとおもいます。

Comments

[gucci_daisuke]

回答ありがとうございます。

求めている内容は
「サイト内の別ページに移動しても、固定位置に表示されたまま（上記の場合、最下部のプレイヤーが再生されたままの状態）で、その部分だけページが変わらず再読込等がされない仕組み」
についてでした。

説明不足で誤解させてしまい、申し訳ありません。
お分かりになれば改めてご教授いただけると幸いです。

よろしくお願いいたします！