一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jQueryはもうweb制作にはなくてはならないものになりましたね。 web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。 そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。 チームサンタの三浦です。 フルスクリーンからのスクロール デモページ ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。 背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい！もちろんリサイズしても大丈夫！ ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。 HTML <body> <section id="s01"> <h1>全画面表示させたいセクション</h1> </section> <sec
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
9月8 colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説 カテゴリ:jQueryjavascript Tweet colorboxありますよね。 モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。 んで、ページ内のhtmlをモーダル内に表示させたい時、 inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。 何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。 jquery.smoothScroll.js ってやつね。 これとcolorboxのinlineを同時に使うと、モーダルが開かない。 解決策は簡単だった。 <a href="#inline_box" class="inline" data-tor-smoothScroll="noSmoo
ページをスクロールして、対象のブロック要素がある一定の位置まで来たらその要素の表示・非表示を切り替えるライブラリー関数を作成。 デモページ 実際の切り替え処理を行ったデモページがこちら 各ファイルの記述 HTMLの記述 <section> <div id="hoge">ページスクロール 0px</div> <!-- 解説① --> <div id="aaa">#aaa要素</div> <!-- 解説② --> </section> CSSの記述 /* 相対要素の指定 */ section { position:relative; background: #1e5799; height:5000px; } /* 表示・非表示する要素の指定 */ #aaa { position:fixed; width:200px; height:200px; top:0; background:#000;
LP（ランディングページ）などでよく使われている、ある特定のエリアに差し掛かった時にパッと色が変わるナビゲーションの実装をしていきます。 今回は、セクションが画面に登場する度に、それに応じたid指定のサイドメニューの色が変わる効果を例にあげますが、そうでない場合にも応用が効くと思います。 HTML <main> <section id=”to_section1″>1</section> <section id=”to_section2″>2</section> <section id=”to_section3″>3</section> <section id=”to_section4″>4</section> <section id=”to_section5″>5<
jQueryで長いページの区切り（セクション）ごとに背景を変化させる 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 投稿日2011年11月07日 更新日2011年11月07日 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
Result jQuery $(function() { var secTopArr = new Array(); var moveFlug = false; var allHeight = $('body').outerHeight(true); var bgImg = new Array('#000','#eee', '#555', '#ccc', '#999'); ////各sectionの位置 $('div.section').each(function (i) { secTopArr[i] = $(this).offset().top; }); var current = -1; //現在位置がセクションの位置より大きい場合は背景切り替え $(window).scroll(function () { for (var i = secTopArr.length-1; i>=0; i
ユースケースとしては、Twitterのタイムライン表示ページのように最下部までスクロールしたら、そのイベントをキャッチして次ページのツイートをAutoloadして表示させたい！みたいなとき。 $(window).on("scroll", function() { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page } }); 上コードでは、ウインドウのスクロール時にスクロール位置が今どれだけなのかを差分を見て計算してる。それが0以下になったら
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
指定量スクロールした時点で上端にメニューを出す方法ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。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)
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
こんばんは、黒ブタです。 最近のサイトで使われている技術ですが、今回はスクロールすると開始するイベントを紹介したいと思います。 サイドバーやヘッダーのナビでよく見かけますね。 どういったものかと言いますと、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タグ内に下記スクリプトとソースを挿入して
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、 jQueryでスクロール量を測るサンプルを作ったので紹介してみます。 jQueryでブラウザのスクロールされた際の値を取るには 『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、 あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。 なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。 実際の取得する際の記述方法は $(window).scrollTop(); $(document).scrollTop(); といった書き方でページのTOPからの距離を測れます。 『$(‘html’).scrollTop();』でもいけるっぽいですが
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
