基于浏览器窗口大小的条件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关于纯JS和jquery.com的jQuery部分

Answer 2

你可以在你的scroll事件回调中放置这样的东西。

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