3

レスポンシブ デザインで scrollTop() 関数を実装しようとしていますが、何らかの理由でこのコードが機能しません。

以下は、ページがまったくスクロールされたかどうかをチェックするよりも、ページが完全にロードされたかどうかをチェックします。それよりも、ページがヘッダーを超えてスクロールしたことを確認した後、画面の上部に固定された画像が表示され、ページが画面の上部に送信されます。私の問題は、画像が表示されないことです。どんな助けでも大歓迎です！

$(document).ready(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });
        $(window).resize(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0').css('display','block');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });
4

1 に答える 1

3

トラブルシューティングが必要でしたが、問題が見つかったと思います。

読み込み時にドキュメントがヘッダーを超えてスクロールされない場合は、上向き矢印の css を に設定しますdisplay:none。

しかし、それが十分にスクロールされると、設定するだけで、position: fixed実際にはオンに戻すことはありません。

したがって、次の行を変更します。

$('#up-arrow').css('position', 'fixed').css('right', '0');

に：

$('#up-arrow').css({'position': 'fixed', 'display': 'block', 'right' : 0});

そして、それはうまくいきます。

于 2012-11-18T02:58:42.863 に答える