Javascript 特定窗口大小的触发器函数

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

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

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

---

谢谢你的帮助

要在调整浏览器大小时跟踪浏览器的宽度和高度，请执行以下操作：

$(window).resize(function()
{
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    // More code here...
};

---

然而，我认为有一种更好的方法来保持div，一种不涉及Javascript的方法。您是否尝试过使用

位置：fixed

要在调整浏览器大小时跟踪浏览器的宽度和高度，请执行以下操作：

$(window).resize(function()
{
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    // More code here...
};

然而，我认为有一种更好的方法来保持div，一种不涉及Javascript的方法。您是否尝试过使用

位置：fixed

只需将检查移动到事件处理程序中：

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

这也使得在

窗口

上使用jQuery的

高度

功能实现跨浏览器兼容性变得合理。

只需将检查移动到事件处理程序中：

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

---

这也使得在

窗口

上使用jQuery的

高度

功能来实现跨浏览器兼容性是合理的。

“我有一个div在浏览器滚动时跟随它：“我可以说：作为一个用户，我讨厌这些。”哈哈，当我被用于邪恶的目的时，我也是。但这是一个函数div，在页面上显示用户选择的变量的信息。因此，它可以让用户在向下滚动时跟踪他们的选择，这似乎非常有用。@rdrkra:即使这样，我通常也不喜欢它们。相反，我的方法是缩短首选项列表、多步骤或在它们自己的滚动区域中。是的，我一直在考虑采用多步骤方法，以块的形式显示单选按钮的首选项列表。我们将看看我是否能让它发挥作用，以及我得到了什么样的用户体验反馈……否则，正如你所建议的那样，我可能会走这条路。”我有一个div，在浏览器滚动时跟随它：“我可以说：作为一个用户，我讨厌这些。”哈哈，当我被用于邪恶的目的时，我也是。但这是一个函数div，在页面上显示用户选择的变量的信息。因此，它可以让用户在向下滚动时跟踪他们的选择，这似乎非常有用。@rdrkra:即使这样，我通常也不喜欢它们。相反，我的方法是缩短首选项列表、多步骤或在它们自己的滚动区域中。是的，我一直在考虑采用多步骤方法，以块的形式显示单选按钮的首选项列表。我们将看看我是否能让这项工作，我会得到什么样的用户体验反馈…否则可能会按照你的建议走这条路。谢谢你的建议。是的，我试过

position:fixed

，但它不会将div限制在另一个div的高度。至少不容易。JS似乎是获得这种功能的最简单的方法，至少我已经读过了。如何将

viewportHeight

var调用到上述代码中？尝试了一些不同的方法，但无法解决…谢谢你的建议。是的，我试过

position:fixed

，但它不会将div限制在另一个div的高度。至少不容易。JS似乎是获得这种功能的最简单的方法，至少我已经读过了。如何将

viewportHeight

var调用到上述代码中？尝试了一些不同的方法，但无法解决…谢谢你的帮助。尝试了代码，但似乎没有成功。Div不再在所有浏览器中跟随滚动。我认为动态监视事件的原因是，如果用户在会话期间将窗口大小调整为小于400，我根本不希望div跟随滚动，只希望div坐在它的默认位置。@rdrkra:它应该跟随它们，直到/除非窗口高度<400，此时它将不会移动（您可能需要添加一个

else

并将其放置在特定位置）。@TJ“您可能需要添加一个else并将其放置在特定位置”您指的是else语句还是放置在特定位置的实际脚本？（即，就在所讨论的div之前）。对不起，我的新手可能有点…@rdrkra:An

else

用于窗口高度小于400的情况。只需将div设置到特定位置即可。@TJ啊，我明白你的意思。好的，让我玩一会儿，看看是否能让它工作。谢谢你的帮助。尝试了代码，但似乎不起作用。div不起作用允许在所有浏览器上滚动。我认为动态监视事件的原因是，如果用户在会话期间将窗口大小调整到小于400，我根本不希望div跟随滚动，只需坐在它的默认位置。@rdrkra:它应该跟随它们，直到/除非窗口高度小于400，此时point它根本不会移动（您可能想添加一个

else

并将其放在特定位置）。@TJ“您可能想添加一个else并将其放在特定位置”您指的是else语句还是放在特定位置的实际脚本？（即，就在所讨论的div之前）。对不起，我的新手可能有点…@rdrkra:An

else

对于窗口高度小于400的情况。只需将div设置到一个特定位置。@TJ啊，我明白你的意思。好的，让我玩一会儿，看看是否可以让它工作。