stickyが効かない原因(IEでも効かせる方法)2020年04月05日こんにちは。ホームページを作り続けて9年になります。stickyは指定した要素がスクロールしても画面上に追従するCSSです。CSSで要素を追従させる「position:sticky」の使い方position:stickyを使うと要素を追従させることができます。具体的に言うと指定した要素がスクロールされ、画面の一番上から画面外に行こうとしたときに画面一番上に固定されるイメージです。CSSで要素を追従させる「position:sticky」について説明します。この記事を読むしかし、特定の条件により効かないことがあります。stickyが効かない原因と解決方法を説明します。sticky」を指定しています。スクロールしても画面上に追従されているハズです。sticky」を指定した要素に「top:0」を指定しましょう。値は必要に応じて変えてください。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。sticky」のスクロール範囲は親を基準とします。親の高さの範囲内でスクロールします。親の高さと自分の高さが一致・同じだとスクロール隙間がありません。親に自分以上の高さが必要なのです。解決方法1:親の高さを確保する1-1.heightを指定する親の高さをheightを使って指定しましょう。言え、heightの指定は一般的ではなく実用的ではありません。sticky」の仕様を確認するとき程度しか使えないでしょう。1-2.flexを使用floatを使ってしまうと高さの確保が難しくなります。そこでdisplay:flexを使います。display:flexを使うと横並べの要素の高いほうに高さがそろいます。サイドメニューを追随させたいときはこの方法が便利です。1-3.追従させる要素とコンテンツを兄弟要素にするコンテンツがあることでその分高さを確保することができます。sticky」を指定しましょう。2-2.親要素を取り除く親要素が不要なdivなどならその要素を取り除いてしまいましょう。親要素にoverflow:scrollを指定した場合、その親要素内をスクロールしたときに親要素内で追従するようになります。追従しないよ追従するよこれはこれで便利な機能です。追従する基準が変わるので、overflowを指定したときはちょっと注意です。stickyは効きません。sticky」と「overflow:hidden」の両立は不可能なので「overflow:hidden」を使わない方法を考えましょう。sticky」ですが、IEには対応していません。「fixedsticky.js」というjQueryがあります。fixedsticky.jsをダウンロードGitHubからfixedsticky.jsをダウンロードします。任意のフォルダに置きましょう。$(".sticky").fixedsticky();});</script>1行目はjQueryファイルです。2行目が先ほどダウンロードしたfixedsticky.jsです。階層を間違えずリンクさせましょう。sticky」をあてたいクラスを指定します。fixed;}</style>実はこのjQuery、要素が画面を通り過ぎるタイミングでクラスを切り替えているだけなのです。fixed;」を指定します。fixed;」も指定されないという寸法です。fixed;」をあてているので、親ではなくbodyが基準になります。特定の要素内でだけ追従させたいときはiframeなどで別ファイルを使用するしかありません。まとめ1.topが指定されていない「top:0」を指定しましょう。2.親要素の高さと一致している親の高さを確保しましょう3.親要素にoverflowを指定しているoverflow:scrollの場合追従する基準が変わります。overflow:hiddenの場合効きません。4.IEには対応していないjQueryで対応させましょう。stickyが効かない原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。