7

オフセットを使用してスクロール関数に2つの位置を設定するのに問題があります。

ご覧いただけるようにフィドルを作成しました... http：//jsfiddle.net/motocomdigital/SGCHt/12/

このフィドルを開くときは、フィドルプレビュービューポートを下のスクリーンショットと同様のサイズに縮小します。

ここに画像の説明を入力してください

私の問題

条件付きステートメントを使用して、青いタブがどのスクロールポイントにあるかに応じて、青いタブの位置を制御していることがわかります。

黄色の列はタブコンテナを表しておりif else、青いタブが黄色のコンテナの外に出ないように、ステートメントを使用して下部の位置を制御するのは面倒です。

しかし、これを機能させることはできません。一番下の位置のオフセットが機能しません。

var $tab = $('.tab-button');

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

    var windowHalf = $(window).height() / 2,
        content    = $("#content"),
        pos        = content.offset();


    $(window).scroll(function(){

        if ($(window).scrollTop() >= pos.top + windowHalf ){

            $tab.removeAttr('style').css({ position:'fixed', top:'50%'});

        } else if ($(window).scrollTop() >= pos.bottom + windowHalf ){

            $tab.removeAttr('style').css({ position:'absolute', bottom:'0px'});

        } else {

            $tab.removeAttr('style').css({ top: $(window).height() + 'px' });

        }

    });  

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

</ p>

誰かが私がどこで間違っているのか理解するのを手伝ってくれませんか？

ありがとうジョシュ

4

1 に答える 1

8

したがって、要素の下部オフセットを手動で計算する必要があるようです。私はjQueryのドキュメントであなたの生活を楽にする何かを見つけようとしましたが、何も見つかりませんでした。おそらくオフセットは上/左のみをサポートします

http://api.jquery.com/offset/

ラッパーの高さを見つけ、タブの高さを差し引くと、タブのスクロールを制限する場所を正確に把握できます。

また、タブトップのjQuerycss定義を含めました。オンロードを定義せずに、最初のスクロールの前に奇妙なドキュメントの高さの変更がありました。

http://jsfiddle.net/SGCHt/16/

于 2012-07-02T17:36:30.820 に答える