Question

我的脚本可以工作，但它只能工作一半，因为我给if（条件）并且只有在刷新浏览器上的缓存后才能工作。

我的主要目标是将我的副标题修复为桌面版，并且不应在移动设备上修复

这是我的代码

var windowWidth = $(window).width();
if(windowWidth > 768){
    var fixedMenu = $('.subheader-wrapper.row');
    var navOffset = fixedMenu.offset().top;
    $(window).scroll(function () {
        var scrollPos = $(window).scrollTop();
        if(scrollPos > navOffset) {
            fixedMenu.addClass('fixed');
            fixedMenu.addClass('animated fadeIn');
        }
        else {
            fixedMenu.removeClass('fixed');
            fixedMenu.removeClass('animated fadeIn')
        }
        if ( window.location.pathname == '/' ||  window.location.pathname == '/o-kompanii' || window.location.pathname == '/otzyivyi' || window.location.pathname == '/vopros-otvet' ) {
            var infoUs = $('#info-us');
            var infoUsOff = infoUs.offset().top;
            if (scrollPos > infoUsOff - 480) {
                infoUs.find('div:first-child').addClass('animated fadeInLeft');
                infoUs.find('div:nth-child(2)').addClass('animated fadeInUp');
                infoUs.find('div:last-child').addClass('animated fadeInRight');
            }
        }

    });
}

Answer 1

只有在浏览器上刷新缓存后才能正常工作。

您仅在windowWidth > 768时分配事件处理程序，而您的代码似乎也不会响应更改windowWidth。

使用resize事件并将条件置于事件处理程序

中

$(window).on( "resize" , function () {
  if ( $(window).width() > 768 )
  {
     //add scroll event now
  }      
});

Answer 2

我建议在css的帮助下使用它来获得准确的输出。 $(window).width();在不同的浏览器中可能会有所不同。因此，我们可以在css和媒体查询的帮助下获得所需的结果。

.test {
        display: none;
    }
    @media only screen and (max-width: 767px) {
        .test {
            display: block;
        }
    }

JQuery的

$(window).on( "resize" , function () {
        if (jQuery(".test").is(":hidden")) {
            // CODE HERE
        }
    });

如何使if（条件）仅在＆gt;时工作768像素？

2 个答案: