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

Question

我有一个简单的jQuery函数 - 详细说明 - 我正在使用它来操纵文档头的位置，我想知道我是否可以添加一个参数，使得该函数仅 <如果浏览器窗口有一定的大小，/ em>执行？在这种情况下，我希望只有当浏览器窗口宽度超过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 - 对象的height，width，availHeight和availWidth属性。

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

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

请注意，这是一个存在一些跨浏览器陷阱的区域（以及像stumbleupon工具栏一样的问题），因此另一种方法是使用jQuery（您已经在使用）检测您的客户端＆＃39;窗口大小：

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

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

Answer 2

您可以在scroll事件回调中放置类似的内容。

If ($(window).width() < 1024) {
    return;
}