javascript - 我在特定屏幕尺寸下禁用了特定 jQuery 脚本，但是如何在调整屏幕大小时检查它？

Question

我在屏幕尺寸低于 1020 时禁用此功能，但知道如何让它在调整浏览器窗口大小时动态检查吗？:

<script>
$(document).ready(function() {

/*Set height of sections to window height*/
$( "#homepage-fold" ).each(function(){
if ($(window).width() >= 1020) {
    var $this = $(this);}
    $this.css({'height':($(window).height())+'px'});

    /*Recalculate on window resize*/
$(window).resize(function(){
        $this.css({'height':($(window).height())+'px'});
    });
 });

 });</script>

知道如何让我添加的 if 语句在浏览器大小调整时动态工作。我尝试将第一个 if 标记包装在第二个 Recalculate 部分中，但我一定没有将其放在正确的位置。

谢谢!!

--

首先，这似乎是一个简单的解决方案，但我尝试的解决方案不起作用。我对 jQuery 比较陌生，所以我猜测这是我的语法错误 - 可能是这条规则的放置不当。如果有人能帮助我弄清楚如何让它发挥作用，我将不胜感激。我只希望此脚本在屏幕尺寸大于 1020 像素时处于事件状态。 1020 以下的屏幕应该会看到没有此事件脚本的页面。

   <script>
   $(document).ready(function() {

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){
        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });
    });

});</script>

我想通过添加

    if(screen.width >= 1020){

像这样: $(文档).ready(function() {

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){

if(screen.width >= 1020){

        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });

添加:}); });

});</script>

对于我把这段代码弄乱的地方有什么想法吗？谢谢你!!

Answer 1

这就是我的方法。 setFold 函数将所需元素的高度设置为窗口的高度，或者 - 如果窗口的宽度小于断点 (1020)，则将其设置为默认值 (999)。 我还将 onresize 回调包装到一个超时中，延迟其执行，直到调整大小事件实际结束(从而使其成为真正的 onresizeend)。有时这是一个好主意，因为当有人调整窗口大小时，resize 会被多次触发。根据 onresize 所做的操作，这可能会导致相当大的延迟，并且在大多数情况下，当用户停止调整大小时发生一次完全可以(您可以使用 callbackDelay > 此处或完全删除超时内容)。

$(document).ready(function(){

    // DOM READY
    var $window    = $(window), // cached
        $fold      = $('#homepage-fold'),
        breakpoint = 1020,
        defaultHeight = 999,
        resizeTimeout,
        callbackDelay = 200; // ms


    function setFold(){
        if( $window.width() < breakpoint ){
            $fold.css('height', defaultHeight );
        }
        else {
            $fold.css('height', $window.height() );
        }
    }

    setFold(); // initial setting

    // Attach event
    $window.on('resize', function(){
        clearTimeout( resizeTimeout );
        resizeTimeout = setTimeout(function(){
            setFold();
        }, callbackDelay );
    })

});