1

ブラウザーがスクロールするときにブラウザーに追従し、別の div に含まれる div があります。

次の関数は、div を所定の位置に保持し、ユーザーがスクロールしたときに移動します。

        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

ブラウザーの高さが 400px 未満の場合を除いて、これはかなりうまく機能し、バグが発生します。

そのため、ブラウザが >=400 の場合にのみ実行するように単純な行を含めることにしました。

 if (window.innerHeight >= 400) {
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
        }

これは、ブラウザの最初の高さが 400px を超えている限り、問題なく動作するようです。ブラウザー ウィンドウのサイズが最初の高さから変更された場合でも、コードは実行されますが、これは私が望んでいることとは逆です。

基本的に、ブラウザーのサイズを動的に追跡し、高さが 400px を超える場合にのみこのコードを実行し、400px 未満の場合は実行しない方法はありますか?

助けてくれてありがとう！

4

2 に答える 2

1

チェックをイベント ハンドラーに移動するだけです。

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if (window.innerHeight >= 400) {  // <=== Moved it here
            if ($(window).scrollTop() > offset.top) {
                $("#sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            }
        }
    });
});

scrollスクロールがまったくフックされないように最初に一度だけではなく、イベントを処理しているときにチェックが行われるようになりました。

これとは別に、scrollかなり頻繁に発生するイベントでこれを行っているため、要素をラップまたはルックアップする回数を最小限に抑えるようにします。すべてのイベントでそれを行う代わりに、変更されることはなくwindow、あなたも変更されることはないと思われるため、それらを一度sidebarラップ/ルックアップします:

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    var sideBar = $("#sidebar"); 
    var $window = $(window);
    $window.scroll(function() {
        if ($window.height() >= 400) {  // <=== Moved it here
            if ($window.scrollTop() > offset.top) {
                sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                sidebar.stop().animate({
                    marginTop: 0
                });
            }
        }
    });
});

これにより、クロスブラウザーの互換性のためにjQuery のheight機能を使用することも合理的になります。window

于 2012-11-17T07:26:36.757 に答える
0

サイズ変更時にブラウザの幅と高さを追跡するには:

$(window).resize(function()
{
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    // More code here...
};

ただし、div を所定の位置に保持するためのより良い方法、つまり Javascript を使用しない方法があると思います。使ってみましたposition:fixedか？

于 2012-11-17T07:25:14.080 に答える