基于浏览器窗口大小的条件JavaScript执行？

Question

我有一个简单的jQuery函数（在下面进行详细介绍），用于操纵文档标题的位置，我想知道是否可以添加一个参数，以便仅在浏览器窗口为一定大小？在这种情况下，我希望仅在浏览器窗口宽度超过1024px时才执行“ stickyHeaderTop”函数；这可能吗？

<script type="text/javascript">
    $(function(){
    var stickyHeaderTop = $('header').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('header').css({position: 'fixed', top: '0px'});
            } else {
                    $('header').css({position: 'relative', top: '30px'});
            }
    });
});
</script>

Answer 1

您可以使用screen-object的height，width，availHeight和availWidth属性。

例如，如果要在小于800px的屏幕上执行一些代码，请执行以下操作：

if (screen.width < 800){
// do stuff
}

请注意，这是一个跨浏览器陷阱的区域（以及诸如stumbleupon工具栏之类的问题），因此一种替代方法是使用jQuery（您已经在使用）来检测客户端的窗口大小：

if ($(window).width() < 800){
// do stuff
}

在MDN上进一步阅读有关jQuery部分的纯JS和jquery.com