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语句。我尝试首先包装第二个重新计算部分中的标签，但我不能把它放在正确的位置。

谢谢！

-

首先，这似乎是一个简单的解决方案，但我尝试的解决方案不起作用。我是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＆gt; = 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) {

}

此外，您可能还希望将此内容写入调整大小功能，以便在某人调整浏览器窗口大小时，脚本将根据调整大小的尺寸触发或不触发，而不仅仅是初始尺寸。

我在某些屏幕尺寸上禁用了某些jQuery脚本但是如何在屏幕调整大小时检查它？

2 个答案: