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

Question

我有一个简单的 jQuery 函数 - 详细信息如下 - 我用来操纵文档标题的位置，我想知道是否可以添加一个参数，以便该函数仅在浏览器窗口为一定的尺寸？在这种情况下，我希望仅当浏览器窗口宽度超过 1024 像素时才执行“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属性。availHeightavailWidth

如果您想在小于 800 像素的屏幕上执行一些代码，例如，只需执行以下操作：

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

请注意，这是一个存在一些跨浏览器陷阱的区域（并且在使用 stumbleupon 工具栏时会出现问题），因此另一种方法是使用 jQuery（您已经在使用）来检测客户端的窗口大小：

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

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

Answer 2

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

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