我在某些屏幕尺寸上禁用了某些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标签包装起来，但是我一定不能将其放在正确的位置。

谢谢！！

-

首先，这似乎是一个简单的解决方案，但我尝试过的解决方案没有用。 我是jQuery的新手，所以我猜测这是我的语法错误-可能是该规则的放置不当。 如果有人可以帮助我弄清楚如何使它工作，我将不胜感激。 我只希望此脚本在大于1020px的屏幕上有效。 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){

像这样：$（document）.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回调包装为一个超时，该超时将延迟其执行，直到resize事件实际结束为止（因此实际上使它成为一个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 );
    })

});

Answer 2

像这样做：

if ($(window).width() >= 1020) {

}

另外，您可能还希望将其写入调整大小函数，以便如果有人调整浏览器窗口的大小，脚本将根据调整大小而不是仅基于初始尺寸触发或不触发。