一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
指定量スクロールした時点で上端にメニューを出す方法ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。jQueryを使えば、「現在のスクロール位置」を取得してから「指定量以上スクロールされたかどうか」を判定して、ボックスの表示・非表示を切り替える……という処理も、とても簡単に実現できます。
![指定量スクロールした時点で上端にメニューを出す方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0aa01f9e7b239544627c2dbc6ba66d7600fb031/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F9%2F0%2F6%2F0%2Ftopimg_original.png)
回遊率をあげるために、グローバルメニューを固定させたい ヘッダー部分にメニューつけてるブログをよく読むんですが、本文が長文になって下にスクロールしていくと、ヘッダーが隠れてグローバルメニューが表示されなくなるんですよね…。 トップ戻るボタンで戻るのも良いんだけど、出来るだけ無駄なクリック数減らしつつ、沢山のページを見てもらえる仕様にしたい…。 という事で、試行錯誤しながら普通のグローバルメニューを「固定グローバルメニュー」に変えてみましたー！ ちなみに今のメニューは、ゆきひーさんが作ったお洒落メニューをベースとして使用させていただいてます！ いつもありがとうございます〜 www.yukihy.com 固定グローバルメニュー設置 まずは、新たに固定メニューを設置する場合からです。 この場合は以下のサイト通りにコピーしていくと簡単に固定されるメニューが出来上がります。 ※カスタマイズを行う際は
こんばんは、黒ブタです。 最近のサイトで使われている技術ですが、今回はスクロールすると開始するイベントを紹介したいと思います。 サイドバーやヘッダーのナビでよく見かけますね。 どういったものかと言いますと、Facebookのサイドなどでスクロールすると固定されるBOXと言えばわかると思います。 特定の位置までスクロールするとサイドにあるボックスが固定され、さらにスクロールして一定の位置に到達すると解除されるアレです。 さてさて、早速コードを書いていきます。 ・・・の前にDEMOを作ったので見てみましょう。 ※DEMOはPCで見た場合のみでスマホ用には整えていません。 レスポンシブ対応にはしていますが、Android4.2以下はcssのflexに対応していないので、現在はAndroidの為にもflexを使っている要素はスマホで読み込みCSSを変更してリストで並べるように対策しましょう。 対策
当サイトでも実装していますが、ページをスクロールすると特定のナビゲーションを画面の位置に固定し、一定の位置で固定を解除する動きをjQueryで実装します。 コンテンツ量の多い画面では、スクロールすると表示しておきたい要素が消えてしまうこともありますが、固定と固定解除を併用することで効果的な画面を構築できます。 共有リンクや広告要素などを固定表示することで、クリック数増加を補助することができます。 デモ画面 今回は、id="fix_nav"というdiv要素をfixedというクラスを使って固定します。 画面をスクロールした時にmenuというIDのdiv要素が画面上部に到達したタイミングでfixedというクラスをつけます。 fixed_notというクラスで固定前のクラスを指定し、fixed_releaceというクラスで固定後のクラスを指定します。 headタグ内に下記スクリプトとソースを挿入して
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
