Question

当窗口大小低于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"
            });
        }
    });
});

Answer 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"
                });
            }
        });

    }

}

Answer 2

你可以使用一个标志来保持窗口大小的跟踪（我看到你正在使用jQuery，所以我认为它已被加载）：

var smallScreen = false;

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

$(window).resize(function() {
    if($(window).width() < 770) {
        smallScreen = true;
    } else {
        smallScreen = false;
    }
});

然后在调用函数时使用它：

function doSomething() {
    if(smallScreen) {
        //do your stuff here
    }
}

Answer 3

您只需要禁用调整大小和滚动事件侦听器的回调。您可以通过将逻辑包装在窗口高度的测试中来完成此操作。

请注意，bind已被弃用，最好使用on()。你应该对滚动事件非常小心。以下是关于为什么以及如何避免可能导致的性能问题的good article。

<强> Working Demo

$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"
            });
        }
    }
});

Answer 4

使用JQuery .width（）和.height（）函数来获取窗口的大小，然后执行所需的操作。

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

窗口大小低于770px时禁用整个功能

4 个答案: