タグ

scrollに関するBiz-Rのブックマーク (5)

  • ページのスクロールの距離を取得する。 | JavaScript capsule

    前回のページの大きさを取得する。と同様に、スクロールした距離を測るものが jQueryのLightBoxプラグインの中に含まれている関数であります。 function ___getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; }

  • ページ内スクロールのjQueryプラグインいろいろ

    ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with

    ページ内スクロールのjQueryプラグインいろいろ
    Biz-R
    Biz-R 2011/08/21
  • スクロール途中から位置が固定されるナビゲーションを作ってみる

    ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか? 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム(メインコンテンツ)</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する

    スクロール途中から位置が固定されるナビゲーションを作ってみる
    Biz-R
    Biz-R 2011/08/10
  • DOCTYPE 宣言による Property の違いについて - dogmap.jp

    今回、Wordpress 用プラグイン WP-AutoPager を作成した際、色々調べ物をしたことの自分用のまとめ。 マウスカーソル位置を監視する関数を実装したのだが、ブラウザの表示領域を取得するプロパティが DOCTYPE 宣言の有無、ブラウザの違いで違ってくるよと言うお話。 <!DOCTYPE > 宣言の有無によって、ブラウザが標準または互換モードで動作するのだが、その時参照すべきプロパティがブラウザによって変わってくる。 しかも IE6 の場合は <!DOCTYPE > 宣言は必ず1行目に無いとダメ。 <?xml version="1.0″ encoding="UTF-8″?> なんて XML 宣言が先頭に書いてあると後方互換モードになってしまいます orz スクロールバーで隠れている領域を含むサイズが取得できるプロパティ ブラウザ 標準モード 後方互換モード IE6

    Biz-R
    Biz-R 2011/08/08
    scrollTop の値を正常に取得する為に
  • [JS]カーソルの位置でスライドコンテンツのスクロールをコントロールするスクリプト -MouseNavigator

    カルーセルなどのスライドコンテンツで、マウスカーソルの位置でスクロールする方向やスピードをコントロールするjQueryのプラグインを紹介します。 MouseNavigator 当サイトに設置したデモページ [ad#ad-2] 上記デモでは、カーソルを左右に移動するとその方向にスクロールし、端に移動するとより早いスピードでスライドします。 また、方向は水平方向だけでなく、垂直方向にも対応しています。 水平・垂直方向の動きに対応したデモページ スクリプトのオプション スクリプトのオプションでは下記の項目を設定できます。 スピード 方向 持続時間(最小・最大) 反応しないポイント など MouseNavigatorの対応ブラウザ MouseNavigatorのテスト済みブラウザは、下記の通りです。 Chrome 12.0.742.112 Firefox 5 IE 9.0.8112 [ad#ad-

  • 1