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

【问题标题】：Disable a whole function when window size is below 770px当窗口大小低于 770px 时禁用整个功能
【发布时间】：2013-09-07 21:28:36
【问题描述】：

当窗口大小低于 770 像素时，我该怎么做才能禁用整个以下功能？并在屏幕大小超过 770 像素时再次启用它......我们可以使用 JavaScript 来实现吗？

这里是需要禁用的整个函数/代码/sn-p：

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

【问题讨论】：

上面的全部代码，不就是调用函数吗？抱歉，我是新手。

标签： javascript jquery

【解决方案1】：

如果您想在页面加载时触发该函数，并且当有人将屏幕大小调整到 770 像素以上时；

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

    }

}

【讨论】：

有没有办法让它在 Re-size 和没有？
对不起Leo，我不明白你的意思？
当您尝试重新调整屏幕大小时它会起作用，但如果您以该大小访问网站，除非您重新调整屏幕大小，否则它将无法正常工作。
您可能希望查看“去抖动”功能，但在 Webkit 浏览器中，调整大小功能会在用户调整大小时多次触发。去抖它会设置一个超时，所以它只会触发一次 - paulirish.com/2009/throttled-smartresize-jquery-event-handler

【解决方案2】：

您可以使用一个标志来保持跟踪窗口大小（我看到您使用的是 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
    }
}

【讨论】：

我刚刚换了，我虽然你希望它禁用超过 777，无论如何，这应该工作：jsfiddle.net/jonigiuro/uKw8Q/2
我将如何使用我的功能？因为它不适合我，抱歉我是新手。

【解决方案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"
            });
        }
    }
});

【讨论】：

由于某种原因，它也从 770 以上禁用了
嗯，你为什么使用窗口高度？不是宽度？
抱歉，您说的是“窗口大小”，我以为您指的是高度。我更新为使用宽度。

【解决方案4】：

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

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

【讨论】：