東京都

【jQuery】特定の位置から特定の位置まで要素を表示させる

藤尾菜摘, 岡田みえこ

エンジニア, エンジニア

藤尾菜摘

E-kan株式会社 / エンジニア

岡田みえこ

E-kan株式会社 / エンジニア

on 2023-03-28

Photo by Caspar Camille Rubin on Unsplash

こんにちは、E-kan株式会社の藤尾です。
本日は、岡田さんの記事を紹介します。

こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間またしても地味に苦労したので備忘録。
ざっくり必要なところだけ抜き出すとこんな感じです。

やりたいこと

スクロールして最初のCTAボタンが画面上から消えたらフッターにフロートボタンを表示させる
スクロールして最後のCTAボタンが画面上に表示されたらフッターのフロートボタンを非表示にする

<html>
  <body>

    <section>
      <a id="ctabutton_01" href="form.html">CTAボタン01</a>

      （本文省略。それなりに長いし途中にCTAボタン02〜04がある。）

      <a id="ctabutton_05" href="form.html">CTAボタン05</a>
    </section>

    <footer>フッター</footer>

    <a class="floatBtn" href="form.html">フロートボタン</a>

  </body>
</html>

jQuery

//フロートボタンを特定の位置から特定の位置まで表示させる
$(window).on('load',function(){//頁内の全ての要素が読み込まれてから実行
  //ドキュメント全体の高さ
  var pageHeight = $(document).height();
  //頁上部から最初のCTAボタンまでの距離 ＋ CTAボタンの高さ(outerHeight:ボーダーの外側の高さ)
  var ctaFirst = $('#ctabutton_01').offset().top + $('#ctabutton_01').outerHeight();
  //ドキュメント全体の高さ - 頁上部から最後のCTAボタンまでの距離
  var ctaLast = pageHeight - $('#ctabutton_05').offset().top;

  $(window).on('scroll',function(){//スクロールすると実行される
    //現在のトップからの位置 ＝ ウィンドウの高さ ＋ スクロールした高さ
    var scrollPosition = $(window).height() + $(window).scrollTop();
    //スクロールが最初のCTAボタンを超える＆最後のCTAボタンを超えない場合
    if ($(window).scrollTop() > ctaFirst && pageHeight - scrollPosition  >= ctaLast) {
      $('.floatBtn').fadeIn(100);//0.1秒で出現
    } else {//最初のCTAボタンを超えない＆最後のCTAボタンを超えた場合
      $('.floatBtn').fadeOut(100);//0.1秒で消える
    }
  });
});

ちなみにこのテスト案は、ABテストで負けて本番環境へはリリースされませんでした。
悲しいのでここで供養。

E-kan株式会社's job postings

【jQuery】特定の位置から特定の位置まで要素を表示させる

藤尾菜摘

E-kan株式会社 / エンジニア

jQuery テックブログ

E-kan株式会社

私たち、E-kanのメンバーは全員がITエンジニアです。常に進化と変化を繰り返すITの世界で、エンジニアが長く活躍するために。 E-kanでは、エンジニア一人ひとりが思い描くキャリアを創れる世界を実現すべく「ITエンジニア派遣事業」と「ITエンジニアキャリアアップ事業」の2つを中心に事業展開しています。 □■ITエンジニア派遣事業デジタルマーケティングの進化により、ITエンジニアのあり方も変化しました。私たちは、1社で働くだけでは経験できない、Web系・オープン系・制御系などの開発案件、ネットワーク構築やサポートなど様々な種類のプロジェクトに関わる機会を提供することで、ITエンジニアの実りあるキャリアの構築を支援します。 ※また、ソフトウェア受託開発事業も展開中です。 □■ITエンジニアキャリアアップ事業もともとエンジニアとして活躍したメンバーが転身し、キャリアコンサルタントとして在籍。ITエンジニアの一人ひとりが描く「目的地」に辿り着く道のりを“キャリア”と考え、新たなキャリアを築けるよう「ecareer-イイキャリ-」を運営中です。 ◎IT転職からキャリアアップ・フリーランス独立支援サイト「ecareer -イイキャリ-」＞https://e-kan.tokyo/ecareer.html ◎E-kan株式会社が運営するIT系+αのまとめサイト「elabo -イイラボ-」 https://e-kan.tokyo/elabo/ ◎もくもく会などのイイラボで行ったイベントのまとめは、以下からご確認ください。もくもく会実績：メンバー数：339人　開催数　32回　総集客人数：374名 https://connpass.com/user/elabo/open/ ※現在は、コロナ禍ということもあり、リアルイベントは中止させていただいております。終息し安全の担保が取れ次第再度開催を考えております。

Like 藤尾菜摘's Story

Let 藤尾菜摘's company know you're interested in their content

【jQuery】特定の位置から特定の位置まで要素を表示させる

jQuery

E-kan株式会社

テックブログ

Weekly ranking