jquery - jqueryは、要素の下端が到達したときに要素をブラウザビューポートの下部に貼り付けます-resize.browsersizeを使用して変数を更新します

Question

http://jsfiddle.net/rwr4X/2/

私はjqueryスクリプトを作成しました-それは大きくてかさばるものではありませんが、半分は機能します...

var $buzz = $('#buzz'),
    viewportHeight = $(window).height(),
    buzzHeight = 182,
    buzzTop = $buzz.offset().top + buzzHeight,
    buzzPosition = buzzTop - viewportHeight;

$(window).bind("resize.browsersize", function () {

    var viewportHeight = $(window).height(),
        buzzTop = $buzz.offset().top + buzzHeight,
        buzzPosition = buzzTop - viewportHeight;

}).trigger("resize.browsersize");

$(window).scroll(function () {

    if ($(window).scrollTop() >= buzzPosition) {

        $buzz.css({
            position: 'fixed',
            bottom: 0
        });

    } else {

        $buzz.removeAttr("style");

    }

});

上記のスクリプトが機能するようになりましたが、最初の viewportHeight 変数に対してのみです。

基本的に、私の実際のプロジェクトでは、ページに ajax 要素、font-face、およびさまざまなサイズのアニメーションがあります。また、ブラウザのビューポート サイズが変更されると、変数を更新できないようで、バズがジャンプします。

上記のスクリプトが実際に動作している私のフィドルを参照してください: http://jsfiddle.net/rwr4X/2/

ページを下にスクロールするとバズが表示され、画像の下端がビューポートの下部に達すると、位置が固定に切り替わります。シームレスに見え、きれいに流れます。

ただし、ajax などでページが大きくなるのをシミュレートする場合は、フィドルの青と緑の div をクリックして、クリックごとに 50px を追加します。次に、上下にスクロールすると、スクロール ポイントに到達するとバズがジャンプ/スキップすることがわかります。これは、scrollTo 変数がビューポートの新しいサイズに更新されていないためです。

ビューポートのサイズが変更された場合、バズは常にビューポートの下部にシームレスに貼り付けられているようです。

前もって感謝します。

フィドルを見る: http://jsfiddle.net/rwr4X/2/