jQueryでスクロールしたら特定位置で固定する方法

jQueryでスクロールしたら特定位置で固定する方法 CSS
この記事は約6分で読めます。
スポンサーリンク

ヘッダーが消えそうになると上に固定されたり、カラムが特定位置で固定されたり
なんとなくどうやってやっているのか気になっていたので、調べてみたら理解できた!
その理解したことについてまとめます。

1まずは「特定位置」を取得しよう

ある要素、ここでは「#youso」とします。
まずある要素(#youso)のトップからの距離を取得します。

$(function() {
  // #yousoのトップからの距離を「youso」へ格納
  var youso = $("#youso").offset().top;
  // 「youso」をアラーとしてみます。
  alert(youso);
});

2次に「スクロール値」を取得します

スクロール値を取得する際に使われる「.scrollTop()」ですが、「T」を大文字にするのを忘れる時があります。
実際、スクロール値を取得する際に、値が取れなくてjavascriptが機能せず小一時間悩んだ結果、大文字にするのを忘れていた経験が有るので大文字にするのを忘れないようにして下さい!(自分に)

$(function() {
  $(window).on("scroll", function() {
    // スクロール値を取得する場合「.scrollTop()」
    var scroll = $(window).scrollTop();
    // すぐ下の「.scroll」にスクロール値を表示
    $(".scroll").text(scroll);
  });
});

↓「.scroll」でスクロール値を表示

0

1と2を使って「スクロール値」が「特定位置」まで来たらを取得します

あと少しで「特定要素までスクロールしたら」ができます!
今回は、とある要素を「#to」とします。
スクロールして「#to」まで来たら、アラートが出ます。
スクロール値を取得する際の「.scrollTop()」は、トップの値を常に取っているため、if文で比較するとトップを「#to」が超えたらアラートとなります。
なので、その値にウィンドウの高さを追加して「#to」が見えたらアクションをするよう変更します。
ここで使われるのが「$(window).height()」で、これはウィンドウの高さを取得します。

$(function() {
  // #toのトップからの距離を「toaru」へ格納
  var toaru = $("#to").offset().top;
  $(window).on("scroll", function() {
    // スクロール値を取得する場合「.scrollTop()」
    var scroll = $(window).scrollTop() + $(window).height();
    // とある要素「#to」までスクロールしたらアラートを出します。
    if(scroll >= toaru) {
      alert("とある要素が出現した!");
    }
  });
});
結果は下にスクロール↓↓↓
私はとある要素である。

最後にパソコンの人だけが確認できるが、右のカラムの「人気記事」がさっきからずっと付いてきている

この「人気記事」には「#sidebar」というIDが付いている。
こいつにjavascriptを使って、このページのみずっとついてくるようにしている。
この場合、ウィンドウのトップに来たらアクションを起こすので「$(window).height()」は使わない。
さらに、ヘッダーとフッターがあるので、その辺も考慮して書きます。
書き方はこれだ。

$(function() {
  // 固定する要素を変数に格納
  var side = $("#sidebar");
  // スライダーを固定する距離に使用するクラスを変数に格納
  var cont = $(".content");
  
  // #sidebarのトップからの距離を「sidebar」へ格納
  var sidebar = side.offset().top;
  // 「kizi」に記事コンテンツの高さに多少加減して記事コンテンツの終わりまでの長さを取得
  var kizi = cont.outerHeight() - 300;
  $(window).on("scroll", function() {
    var scroll = $(window).scrollTop();
    if(scroll >= sidebar) {
      
      // 「#sidebar」が記事の終わりまで来たら記事の下に固定
      if(scroll >= kizi) {
        side.css({position: "absolute", top: "auto", right: "0", bottom: "0", height: "auto"});
        
        // ウィンドウのトップが「#sidebar」に来たら固定します。
      } else {
        side.css({position: "fixed", top: 0, right: 0, bottom: "auto", height: "auto"});
      }
      // それ以外はもとに戻します。スクロールを上まで戻すと、ちゃんと元の位置に居てくれます。
    } else {
      side.css({position: "relative", top: "auto", right: "auto", bottom: "auto", height: "100%"});
    }
  });
});
解説

まず、スクロールしたらずっとついてくる要素を変数に入れます。
「var side = $(“#sidebar”);」
次に、要素がついてくる距離にあたる要素を変数に入れます。
「var cont = $(“.content”);」
スクロールしたらついてくる要素「side」のトップからの距離を変数に格納します。
「var sidebar = side.offset().top;」
要素がついてくる距離にあたる要素「cont」の長さを変数に格納します。
このページではCSSの読み込みがこのjavascriptの記述より遅いため、「-300」が必要になりました。
「var kizi = cont.outerHeight() – 300;」
最後に現在のスクロール値を変数に格納します。
「var scroll = $(window).scrollTop();」
この変数に入れた要素で、if文を作成していきます。
if文は3つになります。
内容は、
1「現在のスクロール値(scroll)が、ついてくる要素のトップからの距離(sidebar)を超えたら」
if(scroll >= sidebar)
2「現在のスクロール値(scroll)が、固定する長さ(kizi)を超えたら」
if(scroll >= kizi)
3「それ以外の時」
else
になります。
それ以外の時とは、一番上からついてくる要素のトップからの距離(sidebar)までです。
if文の中にCSSを変更する記述がありますが、このサイト用のCSSの変更ですので、コピペでは使えない可能性があります。
もし、コピペする場合はCSSを自分のサイトにあったものに変更をしてください。
ヘッダーとフッターがなく常に固定させておきたい場合は、javascriptを書かずにCSSだけで「position:fixed」をすれば固定されます。

SNSフォローボタン
エンデ・バタローをフォローする
CSSjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました