CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る - Qiita
追記：iPhoneなどのスマホでも気持ちよくなるように修正 なんか最近スマホサイトとかでよく見る、ちょっとスクロールすると、ページ途中にあるメニューがヘッダーに固定されるようなやつ。ヘッダー全体が最初から固定なんじゃなくて、流動的っぽいの。試しに実装してみた。 jQuery使ってるけど、特にjQueryである必要はない。普通のJavaScriptなら、document.getElementById().offsetTopでOK。 <header> <h1>Title</h1> <nav id="global-nav"> <a href="">hogehoge</a> </nav> </header> <section> <p>piyopiyo</p> </section> jQuery(function() { var nav = jQuery('#global-nav'); // メニュ
1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
[iOS] iPadでスクロールさせたときに、CSS3 アニメーションが止まる « きんくまデザイン
こんにちは。きんくまです。 CSS3アニメーションのこんなコードを書いて、あるエレメントに適用しました。 @-webkit-keyframes flapping { 0% { -webkit-transform:scale(0,0); opacity:1; } 100% { -webkit-transform:scale(1,1); opacity:0; } } でも、iPadでスクロールさせたときに、CSS3 アニメーションが止まってしまい、困ってしまいました。 正確に言うと、0%のキーフレームの位置からそれ以上進まなくなってしまうのです。 ググったところ、こんな感じのページを発見。 >> GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 CPUからGPUのレンダリングの切り替えのタイミングでsafariがちらつくとのこと。 最初からGPUレンダリングを使えば、そ
ScrollMenuBarDemo - SmartNews風のスクロールメニューを実現 - モバイル/タブレット向けオープンソース紹介 - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
いいUIというのはつい真似したくなるものです。それが特にデザインの良さを売りにしているアプリの場合はそうでしょう。今回はキュレーションニュース配信アプリ、SmartNewsに注目したScrollMenuBarDemoを紹介します。 ScrollMenuBarDemoはSmartNewsアプリのメニューバー部分、タブ風に分かれていてスクロールできる機能に注目しています。それでは見ていきましょう。 ScrollMenuBarDemoのスクリーンショット トップ おお、実にそれっぽいデザインです。タブは最大幅が決められ、それに従って幅が増減する仕組みになっています。 スクロール もちろんスクロール可能です。 タップ どのタブをタップしたか補足できます。タブの下の小さいバー部分の色も変わっています。 別タブに切り替え スムーズな操作で分かりやすいです。 ScrollMenuBarDemoの使い方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#09 スクロールで自動読み込みしよう | PHPとjQueryで実装する「もっと読む」 - プログラミングならドットインストール
