javascript - 基于浏览器窗口大小的条件 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

您可以使用屏幕-对象的高度、宽度、availHeight和availWidth属性。

如果您想在小于 800 像素的屏幕上执行一些代码，例如:

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

请注意，这是一个存在一些跨浏览器陷阱的区域(以及像 stumbleupon 工具栏这样的问题)，因此替代方法是使用 jQuery(您已经在使用)来检测客户端的窗口大小:

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

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