おれせか

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

最新版はこちら

このプラグインの名前何にしよーって友達と喋りつつ、stalkingとかいいんじゃね?って話になったけど「それついてくるっていうより忍び寄るって意味だよ」ってことでナシに。
他にもslidingとかslipとかslimeとかも考えたけど、なんか面倒になったので仮でつけてたfloatingに決定。

わりとガチャガチャとスクロールを動かすとたまに変な動きするけどまぁいいか・・・。

あとSafariだとたまに、だいぶ下までふっとんだり、スクロールすればするほどえんえんウィンドウが縦に伸び続けるとかいう謎い動きをしたりするのですが、今んとこ放置。

必要なもの

サンプル

floatingサンプル

使い方

<script type="text/javascript">
$(function(){
    $(".hogehoge").floating()
});
</script>

あと、該当のエレメントにはスタイルをposition:absoluteに。

オプション

wait(デフォルト値:100)
スクロールしてから動き出すまで(ms)
minDuration(デフォルト値:100)
アニメーションの最小時間(ms)

ソース

$.fn.floating = function(options){
    
    options = $.extend({
        wait: 100,
        minDuration : 100
    }, options);
    
    return $(this).each(function(){
        var $this = $(this);
        var boxTop = function(){return $this.offset().top};
        var startTop = boxTop();
        
        var timer;
        
        $(window)
            .scroll(function(){
                if(timer) return;
                timer = window.setTimeout(function(){
                    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    var nowTop = boxTop();
                    var targetTop = scrollTop + startTop;
                    var duration = Math.max(options.minDuration, Math.abs(targetTop - nowTop));
                    
                    $this
                        .animate({
                            top: targetTop + "px"
                        }, duration, function(){
                            timer = 0;
                        });
                }, options.wait);
            });
    });
};
PAGETOP
PAGETOP

Prev / Next in same category

PAGETOP

Comments (10)

Very interesting post. really informative. of all the blogs I have read the same topic, this one is actually enlightening.

[2013/12/12 (木) 16:27]

On the keep an eye on division, LICENCE PLATE was first the actual trademark in order to incorporate connections to make sure you accredited chain stores from the internet.

[2014/05/27 (火) 16:44]

I’ve been trying to find out a little more about this kind of stuff, thanks for sharing.

[2014/07/12 (土) 15:21]

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

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

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

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

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

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

l直書きでネスト作るこ

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

シャネル激安は近いうちに全く新しいのを発表して制限してシリーズを設計します。

シリーズの中ですべて設計がすべてきつくてすぐの流行っている傾向を貼って、
シャネル激安http://www.cctoh.com/
また(まだ)異なる風格の組み合わせ自由を行うことができます。
シャネルバッグ
シャネル財布
シャネル腕時計
シャネルピアス
シャネル眼鏡
シャネル靴
今おしゃれな女性ネットのファッションに従って小さくいっしょにシャネルが新しく制限して袋、
シャネル激安シリーズを包みを見てみに来を編みましょう!

[2015/12/01 (火) 18:37]

まぁなんかあるでしょ。

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

このプラグインの名前何にしよーって友達と喋りつつ、stalkingとかいいんじゃね?って話になったけど「それついてくるっていうより忍び寄るって意味だよ」ってことでナシに。

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

わりとガチャガチャとスクロールを動かすとたまに変な動きするけどまぁいいか・・・。

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

Comment Form

PAGETOP

Trackbacks (0)

トラックバックはありません。

PAGETOP

Trackback URL

PAGETOP

Search