BootstrapとjQueryのスムーススクロールをうまく使う方法
こんにちは、プロクラスの渡辺です！ この間、五山の送り火でした！いつも都合が合えば見ているのですが、これを見るために時間になるとご近所の方が外に出てきて少し会話をしたりしているときにいつもお盆が終わるんだなあ～と思います。まあ、今年は映画を見ていて気が付いたら終わっていましたが…（笑） 今回は（も）備忘録です。 最近、便利なBootstrapを使う機会が増えたのですが、jQueryのスムーススクロールと相性が良くないものがあるんですよね。 「カルーセル」「ドロップダウンメニュー」「タブメニュー」とか、つまり【href=”#”】を使うやつ！ 😈 でも、Bootrtrapのこういうのが簡単に実装できるのは捨てがたいので一度自分で解決していたのですが、数か月後にすっかり忘れてまた調べていたので、ブログに書いて記憶にとどめようと思います！ 😉 そもそもなんでちゃんと機能しなくなるの？ これがわ
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
[JS]あなたのウェブページがどのくらいスクロールされて見られているかが分かるスクリプト -jQuery Scroll Depth
Googleアナリティクスを使って、ウェブページがどのくらいスクロールされているか解析するjQueryのプラグインを紹介します。 下記のキャプチャはスクロールの量（パーセント）ですが、特定のエレメント（フッタや記事など）までスクロールされたかもできます。 Tracking Scroll Depth with jQuery and Google Analytics jQuery Scroll Depth -GitHub [ad#ad-2] Scroll Depthの使い方 Scroll Depthの対応ブラウザ Scroll Depthの使い方 Scroll Depthの設置は簡単です。 Gooleアナリティクス まず、Googleアナリティクスのトラッキングコードを設定します。 トラッキング コードの追加 -Googleアナリティクス ヘルプ スクリプト 「jQuery 1.7+」と当スク
jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。
@infonumber333 ﾉ — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日 さきほどのツイートから間もなく、おしゃれなハットのアイコンが目印で北海道の大地のような寛大な心を持ち合わせた紳士の「さいたさん(@saita_ryuhei)」が助けの手を差し伸べてくれるという奇跡が。なんということでしょう。 @infonumber333 分かる範囲でならm(_ _)m — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日 ここぞとばかりにご好意に甘えることに。 サイドバーが「びゅんっ！」ってなる問題。 @infonumber333 途中から固定されるようにはなってましたが、ある程度までスクロールするといきなり「ぴゅんっ！」って固定されるサイドバーが表示されました。 — Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@sai
lazyload.jsはスクロール時に画像の読み込みを開始して美しく仕上がる。
大きな栗の木の下で ■当ブログ投稿内容の当事者や関係者の方で、コメントの削除や記事訂正を希望される方は、該当ページのコメント欄よりお申し付けください。可能な限り対応させて頂きます。 lazyload.jsを使うと、画面のスクロールに合わせて画像を読み込むから美しい。 jquery.jsとlazyload.jsをダウンロード＋アップした上で、 head内に以下を追加 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/ja
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
