PR

特定の区間だけ要素を非表示にするjQueryプログラム

フロントエンド

ページの特定区間だけ要素の表示を制御する処理ってどうするの?

こうした悩みを解決します。本件はココナラ案件です。

姫野秀徳

組み込みエンジニアとしてメーカー勤務10年。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作&プログラミング教室を開校。
組み込み開発の実際を発信するyoutube活動も行う。

無料で学べる組み込み開発オンラインスクールはじめました!
https://kumicla.tatepro.com

姫野秀徳をフォローする

プログラムの概要

画面中に固定表示しているボタンを特定の区間だけ非表示にさせます。

↑こういうボタンですね。画面中央下端にも表示しています。

LP制作のとき、注文ボタンを中央下端に固定表示させておくことが多いですが、本文中にも注文ボタンを配置したいときがあります。

このとき、固定表示のボタンと本文中のボタンが重複してしまい見栄えが悪くなるという問題が発生します。

そこで今回のプログラムのように本文中のボタンが表示されるセクションでは固定表示のボタンを一時的に非表示にさせるとユーザーフレンドリーな設計にできます!

youtubeで実際の画面を見ながら説明する動画あげましたので、よければどうぞ。

では本記事は本記事として、動作サンプルを示します。

動作サンプル

青色背景の枠が画面に入ると、ボタンが自動で消えます。

この区間はボタンを表示する

この区間が画面上にあればボタンを非表示にする

ボタン同士の重なりを防ぐためにこの区間ではボタンを消したい

この区間もボタンを表示する

青色背景の枠が画面から消えると、再びボタンが表示されます。

動作原理

ボタン非表示にする要素の位置(起点と長さ)をHTML読み込み時に記憶させます。height、offset().top

画面のスクロール位置をリアルタイムにモニタします。scrollTop()

スクロール位置がボタン非表示要素内になければボタンを表示処理します。fadein

スクロール位置がボタン非表示要素内にあればボタンを非表示処理します。fadeout

この処理をスクロールするたびに行ってボタンの表示切替ができます。

プログラムソースコード提供中!

本ブログ記事のプログラムソースコードは下記にて提供しています。

jQueryの学習用にどうぞ。

ボタン表示切替プログラム(実績2件) | 立科プログラミング powered by BASE
...

まとめ

jQueryで画面中に固定表示しているボタンを特定の区間だけ非表示にできます。

この内容が良いと思ったら、いいね💖を押して教えてください!

組みクラ – 組み込み開発を学び、未来を創るエンジニアへ
無料で学べる!組み込み開発の基礎から応用までをマスターできるオンラインスクール「組みクラ」

組み込みエンジニアは、あらゆる産業の基盤を支える重要な職業です。
私たちタテプロは、次世代の組み込みエンジニアを育成し、業界の競争力を高めるために活動しています。
あなたも、無料で学べる「組みクラ」で、組み込み開発のスキルをしっかり身につけ、キャリアを加速させましょう!
今すぐ学び始めて、将来の自分をステップアップさせる第一歩を踏み出しませんか?

\立プロとLINEで友だちになりませんか/
立プロと友だちになる
フロントエンド
シェアしていただけると嬉しいです!

コメント

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