IE11対応のstickyfillサイドバーの実装例(プラグインなし)

stickyfill で 粘着サイドバーを入れたときのメモ。

概要

対応ブラウザ

PC: chrome, safari など最近のブラウザに加えて、IEは11以上。

使うもの

おそらく、 stickyfill がベストかなと。

stickybitsというのも試したのですが、 dollarshaveclub/stickybits: Stickybits is a lightweight alternative to position: sticky polyfills ?
ie11だと、幅を指定するのにコツが必要だったり、最後スクロールしたときに、サイドバーが消える現象があったので、使いませんでした。

作るもの

固定させたいものはなんでもよい(ヘッダーとかでもよい)のですが、今回は個別記事の横に目次を表示させるウィジェットをstickyにします。

stickyfill の配置

取得したjsファイル:

配置した場所:

OK

stickyfill.jsの読み込み

単に好みの問題だが、ここではjQueryの読み込みんだあとで使いたいので、 ['jquery']を引数に追加する。

実行させたいスクリプトとスタイルをPHPファイルに書く(sticky.php)

このサイトの場合 .tm-widget.uk-panel.widget_toc-widget.toc-widget-2 が粘着させたいウィジェット。

sticky.php を読み込ませる

wp_footer で sticky.php を require するとかする。

結果

Image from Gyazo

以上。

Filed under: WordPressの基本Tagged with:

よく読まれている投稿

No comment yet, add your voice below!


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.