0

このSOの質問のコードを見ていて、ページ上の別の要素が画面に表示されているかどうかに応じて、ナビゲーションバーのようにdivの表示を切り替えるのに役立つと思いました。ページから使用したコードは次のとおりです。

function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((docViewTop < elTop) && (docViewBottom > elBottom));
}

これを行う関数を作成しようとしましたが、残念ながらプログラミングが苦手です。これが私が使用したものです：

$('#magicnav').hide();
var intro = $('#intro');
$(document).ready(function () {
   if (intro.isScrolledIntoView()) {
    $('#magicnav').fadeOut();
   } else {
    $('#magicnav').fadeIn();
    }
  });

私もこのステートメントを試しましたif(isScrolledIntoView($intro))が、明らかにそれも間違っています。誰でも私を助けることができますか？

参照用のページのjsfiddle を次に示します。私の目標は、特定の div (ナビゲーション リンクも含む) が画面に表示されない場合にのみ表示される固定ナビゲーション バーを画面の上部に表示することです。

「magicnav」の div をページの中央に貼り付けたことにお気付きかもしれません。これは意図的なものでした。現時点で一番上に固定されないようにするためであり、jQuery が機能しているかどうかをすぐに確認できるようにする必要がありました。

4

2 に答える 2

3

$(document).ready()要素の状態を一度だけチェックします。代わりに、$(window).on('scroll');

この JSFiddleで修正しました

于 2013-11-09T22:44:14.470 に答える
1

基本的なトラブルシューティング

スクリプトのトラブルシューティングの最初のステップ:常にコンソールにエラーがないか確認してください。Fiddle のロード時にコンソールを確認すると、次のエラーが表示されます。

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にはメソッド 'isScrolledIntoView' がありません

というメソッドがないから.isScrolledIntoViewです。これは単純な JS 関数であり、要素の ID (クラスまたは ID) を指定すると、その要素が表示されているかどうかが返されます。次のように使用する必要があります。

// For class
if(isScrolledIntoView(".class")) {...} else {...}

// For ID
if(isScrolledIntoView("#id")) {...} else {...}

これは、関数が次の行に基づいて要素を評価するためです。

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

また、実際には定義されていませんelTop。elBottomタイプミスだと思います。固定関数は次のとおりです。

関数 isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((docViewTop < elemTop) && (docViewBottom > elemBottom));

}

あなたのフィドル

DOM を操作するときは、DOM の準備が整ったときに必ず実行してください。

$(document).ready(function () {
    $('#magicnav').hide();
    $(window).scroll(function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    });
});

.hide()メソッドも DOM Ready イベントに移動したことに注意してください。また、関数isScrolledIntoViewは元の Fiddle で DOM の準備ができたときに一度だけ起動されます。スクロール イベントが検出されるたびに起動する必要があるため、条件ステートメントを$(window).scroll()イベント内にラップしました。

私はあなたのフィドルを修正しました — http://jsfiddle.net/teddyrised/XN82s/10/

その他の注意事項

イベントをリッスンするとき.scroll()、スクロールバーを動かし始めると、ブラウザーによってはイベントをリッスンする回数が多すぎます。たとえば、この気の利いたプラグインを使用して、これを調整することをお勧めします。

コードの変更は最小限で済みます。

$(document).ready(function () {
    $('#magicnav').hide();

    // Here we throttle the scroll event to firing once every 250ms
    $(window).scroll($.throttle(250, function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    }));
});
于 2013-11-09T22:44:33.747 に答える