0

当窗口大小低于 770 像素时，我该怎么做才能禁用整个以下功能？并在屏幕大小超过 770 像素时再次启用它......我们可以使用 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

如果您想在页面加载时触发该功能，并且当有人将屏幕大小调整到 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"
                });
            }
        });

    }

}
于 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 回答