javascript - 特定窗口大小的触发功能

Question

我有一个 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
                    });
                };
            });
        });
        }

只要初始浏览器高度大于 400 像素，这似乎就可以正常工作。如果浏览器窗口的大小从初始高度调整，代码仍然会执行，这与我想要的相反。

本质上，有没有一种方法可以动态跟踪浏览器大小，并且仅在高度大于 400px 时运行此代码，而在小于 400px 时不运行？

感谢您的帮助!

Answer 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 事件时，就会完成检查，而不是一开始就检查一次，以防止滚动被 Hook 。

<小时/>

另外，因为您是在 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
                });
            }
        }
    });
});

这也使得在 window 上使用 jQuery 的 height 函数来实现跨浏览器兼容性是合理的。