0

ウィンドウ サイズが 770px 未満の場合、次の関数全体を無効にするにはどうすればよいですか? 画面サイズが 770px を超えると再度有効にします... JavaScript を使用してそれを行うことはできますか?

無効にする必要がある関数/コード/スニペット全体を次に示します。 

//Sticky Box //
$(function () {
    $.fn.scrollBottom = function () {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $StickyBox = $('.detailsBox');
    var $window = $(window);

    $window.bind("scroll resize", function () {
        var gap = $window.height() - $StickyBox.height() - 10;
        var visibleFoot = 255 - $window.scrollBottom();
        var scrollTop = $window.scrollTop();

        if (scrollTop < 50) {
            $StickyBox.css({
                top: (130 - scrollTop) + "px",
                bottom: "auto"
            });
        } else if (visibleFoot > gap - 100) {
            $StickyBox.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $StickyBox.css({
                top: 80,
                bottom: "auto"
            });
        }
    });
});
4

4 に答える 4

1

ページがロードされたとき、および誰かが画面のサイズを 770px 以上に変更したときに関数を起動したい場合。

// Fire when the page loads
stickyBox();

// Fire on page resize
$(window).resize(stickyBox);

// Our function
function stickyBox() {

    if($(window).width() > 770) {

        $.fn.scrollBottom = function () {
            return $(document).height() - this.scrollTop() - this.height();
        };

        var $StickyBox = $('.detailsBox');
        var $window = $(window);

        $window.bind("scroll resize", function () {
            var gap = $window.height() - $StickyBox.height() - 10;
            var visibleFoot = 255 - $window.scrollBottom();
            var scrollTop = $window.scrollTop();

            if (scrollTop < 50) {
                $StickyBox.css({
                    top: (130 - scrollTop) + "px",
                    bottom: "auto"
                });
            } else if (visibleFoot > gap - 100) {
                $StickyBox.css({
                    top: "auto",
                    bottom: visibleFoot + "px"
                });
            } else {
                $StickyBox.css({
                    top: 80,
                    bottom: "auto"
                });
            }
        });

    }

}
于 2013-09-04T11:39:45.780 に答える
0

サイズ変更およびスクロール イベント リスナーへのコールバックを無効にするだけです。これを行うには、ウィンドウの高さのテストでロジックをラップします。

bindは推奨されていないことに注意してくださいon()。代わりに使用することをお勧めします。また、スクロール イベントにも細心の注意を払う必要があります。原因となるパフォーマンスの問題を回避する理由と回避方法については、こちらの記事を参照してください。

ワーキングデモ

$window.on("scroll resize", function () {
    if ($window.width() > 770) {
        var gap = $window.height() - $StickyBox.height() - 10;
        var visibleFoot = 255 - $window.scrollBottom();
        var scrollTop = $window.scrollTop();

        if (scrollTop < 50) {
            $StickyBox.css({
                top: (130 - scrollTop) + "px",
                bottom: "auto"
            });
        } else if (visibleFoot > gap - 100) {
            $StickyBox.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $StickyBox.css({
                top: 80,
                bottom: "auto"
            });
        }
    }
});
于 2013-09-04T11:41:25.020 に答える
0

フラグを使用して、ウィンドウ サイズを追跡できます (jQuery を使用しているため、読み込まれていると仮定します)。

var smallScreen = false;

$(document).ready(function() {
    smallScreen = $(window).width() < 770;
});

$(window).resize(function() {
    smallScreen = $(window).width() < 770;
});

そして、関数を呼び出すときにそれを使用します。

function doSomething() {
    if(smallScreen) {
        //do your stuff here
    }
}
于 2013-09-04T11:39:27.150 に答える
-1

JQuery の .width() および .height() 関数を使用してウィンドウのサイズを取得し、必要な操作を実行します。

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
于 2013-09-04T11:38:54.743 に答える