おれせか

なんかそれっぽいのをうにうに。

08/12/05 修正
return $(this) → return this に。
古いのだとメソッドチェーンしたときにたぶんまずいことになる。

スクロールについてきてぬるぬる動くやつをちょと変更。

  • がちゃがちゃとスクロールしまくるとたまに妙な位置で止まるので(もっかいスクロールすれば治るけど)、定期的に今の位置を確認しておかしな場所に居れば本来居るべき場所に動くようにした。
    • ということでオプションに『check』を追加。0にしたら定期チェック無しに。
  • Safariで挙動がおかしな場合があるのでposition:fixedでお茶濁し。

必要なもの

サンプル

floatingサンプル

オプション

wait(デフォルト値:100)
スクロールしてから動き出すまで(ms)
minDuration(デフォルト値:100)
アニメーションの最小時間(ms)
check(デフォルト値:1000)
定期チェックの間隔(ms)
0にするとチェック無しに。

ソース

$.fn.floating = function(options){
    
    options = $.extend({
        wait: 100,
        minDuration: 100,
        check: 1000
    }, options);
    
    return this.each(function(){
        var $this = $(this);
        
        //safariはfixedでお茶濁し
        if($.browser.safari){
            $this.css("position", "fixed");
            return true;//continue
        }
        
        var boxTop = function(){return $this.offset().top};
        var startTop = boxTop();
        
        var timer, checkTimer;
        var scrollTop, nowTop, targetTop, duration;
        var d = document, w = window;
        
        var getPosTop = function(){
            scrollTop = d.body.scrollTop || d.documentElement.scrollTop;
            nowTop = boxTop();
            targetTop = scrollTop + startTop;
            duration = Math.max(options.minDuration, Math.abs(targetTop - nowTop));
        };
        
        var scrollAnimation = function(){
            $this
                .animate({
                    top: targetTop + "px"
                }, duration, function(){
                    timer = 0;
                });
        };
        
        $(w)
            .scroll(function(){
                if(timer) return;
                timer = w.setTimeout(function(){
                    getPosTop();
                    scrollAnimation();
                }, options.wait);
            });
        
        //定期的にチェック checkが0ならスルー
        if(options.check)
            checkTimer = w.setInterval(function(){
                if(timer) return;
                getPosTop();
                if(nowTop == targetTop) return;
                scrollAnimation();
            }, options.check);
        
    });
};
PAGETOP
PAGETOP
PAGETOP

Comments (11)

safariんとこはreturn trueだな。
明日なおす。

[2008/11/18 (火) 03:30]

なおした

[2008/11/18 (火) 12:44]

全力でミスってたので修正。

return $(this)じゃなくてreturn thisだわ。

[2008/12/05 (金) 03:29]

俺もきめぇwww

[2012/12/20 (木) 16:45]

しっかり読まなくてもアジェンダの応用例見るだけでも何ができるのかはすぐわかるよ。

[2014/12/25 (木) 13:01]

流行を見抜くことができるのも実は巡回するで。

異なる風格は過ぎて数年また流行り始めて。

休む騒動の飛躍、各種が高くて大きい上の贅沢なブランドにも次から次へとこ。

[2015/09/16 (水) 15:56]

l直書きでネスト作るこ

[2015/10/13 (火) 16:59]

このシャネル腕時計のブランドの自分、
シャネル激安http://www.cctoh.com/
93―01チップを基礎にする93―02は自動的に鎖の機械のチップに行って駆動します。
シャネル財布
シャネルピアス
シャネル眼鏡
シャネルバッグ
シャネル腕時計
シャネル靴
このチップは48時間の動力を持って貯蓄して、
シャネル激安腕時計の使用更におだやかで心地良くて、
飛行する陀はずみ車は8粒のねじの調節の後の改良システムでと腕時計、
シャネル完璧な精密で正確な度を確保しました。

[2015/11/18 (水) 00:46]

一方、優れたスーパーコピー素材で作りますから、質感が素晴らしいです

[2016/01/15 (金) 17:48]

ということでオプションに『check』を追加。0にしたら定期チェック無しに。

Safariで挙動がおかしな場合があるのでposition:fixedでお茶濁し。

[2016/06/20 (月) 11:11]

流行を見抜くことができるのも実は巡回するで。

[2016/06/27 (月) 18:42]
PAGETOP

Comment Form

PAGETOP

Trackbacks (1)

秋冬ビジネススーツ ローライズスラックスのスーツ

[js] floating.jsちょと変更 | おれせか

PAGETOP

Trackback URL

PAGETOP

Search