スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
スクロールを監視してヘッダーバーを表示/非表示させるjQueryプラグイン「jquery.cb-slideheader.js」
前回は『jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法』という記事を書きました。内容としては、スクロールに合わせてヘッダーバーを表示/非表示させる機能の実装方法となります。今回は、そこで紹介した実装方法を元に汎用的に使うためのjQueryプラグインを作ってみたので紹介させていただきます。使用頻度は高いと思いますので、ぜひ当記事をお読みの上お使いいただければと思っています。 jquery.cb-slideheader.js概要「jquery.cb-slideheader.js」は、ページのスクロールに合わせてヘッダーバーをスライドさせて表示/非表示させる機能を実装するためのjQueryプラグインです。 maechabin/jquery.cb-slideheader.js – GitHub jquery.cb-slideheader.js – n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
