質問: windowYF - $(this).offset().top + 50; if (diffYF > $(this).height()) { $(this).addClass('fixed'); } else if (diffYF > 0) { $(this).removeClass('fixed'); } }); }); } }); ``` また、こちらのプラグインを使用して実現できないかと考えたのですが、私の入れ方が悪いのかこのプラグインを導入すると独自に実装したJSがタブレットやスマホで動かなくなってしまったり、bodyの高さ取得がおかしくなってしまいページ下部に余白ができたろしてしまいます。 動かなくなるJS 別の方法で実装できないかと思い調べてみたのですが、スマホでは動かなかったりしてなかなか良い方法を見つけられません。 おすすめの実装方法を教えていただけないでしょうか? 対応ブラウザは下記を想定しています。 ・IE9以上(IE9は背景が固定されていなくてもOK) ・Chrome、Firefox、スマホ、タブレットは各最新版 何卒よろしくお願いいたします。
回答: position: sticky;のようなことをしたいのだと思いますが、まだ対応ブラウザが少ないですね。 固定するのが背景画像だけということもありそのままでは難しいところがあるかもしれませんが、以下のサイトは参考になるでしょうか? 「position: sticky;」より便利!スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky position-stickyについて調べたメモ iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は