Question

我有一项功能需要在媒体查询中关闭，因为它在移动设备上运行得非常慢。当函数加载到特定的窗口大小时，函数不会触发，但是当调整大小到1024px以下的特定大小时，我的假设是我的headerParallax = null不做任何事情我需要它来移除窗口调整大小的函数移动尺寸的另一种方式。

我试过将空值传递给像headerParallax(null)这样的函数，但是函数似乎仍在运行，就像$（window）.scroll似乎仍然附着所以移动设备即使没有动画正在发生，对滚动仍然不是很敏感。

由于

var headerParallax = function (x, z, y) {



  $(window).scroll(function() {
    // Store scrollTop in variable
    var scrollPos = $(window).scrollTop();
    // var viewportHeight = $(window).height();
    //console.log(scrollPos + 'bgbottle1');

    var bouncePos = ((-1 * (scrollPos ) * 1.30) + scrollPos).toFixed(2);

    var bouncePos1 = ((-1 * (scrollPos -100) * 1.40) + scrollPos).toFixed(2);

    var bouncePos2 = ((-1 * (scrollPos -150) * 1.265) + scrollPos).toFixed(2);


    $(".bottle1").css({ 'background-position': x + bouncePos + 'px'});



    console.log( x + "," + bouncePos + "," + scrollPos);

    //if (scrollPos > 50){

      $(".bottle2").css({ 'background-position': z + bouncePos1 + 'px'});



  //  }

    //if (scrollPos > 850){

      $(".glass").css({ 'background-position': y + bouncePos2 + 'px'});

    //}

  });
} // end headerParallax


//Window resizing fucnsions

$(window).resize(function(){
    if($(window).width() > 1024 ){


    //These variables allow the glass to hold its background position on a window.resize.
    var scrollPos = $(window).scrollTop();
    var bouncePos2 = ((-1 * (scrollPos -215.75) * 1.25) + scrollPos).toFixed(2);


    $(".bottle1").css({ 'background-position': "368px 0"});
    $(".bottle2").css({ 'background-position': "73px 125px"});
    $(".glass").css({ 'background-position': "750px " + bouncePos2 + "px"});
    //window.requestAnimationFrame(headerParallax("368px ","-452px ", "900px "));
    headerParallax("368px ","73px ", "750px ");

    alert("on1");


  }else if($(window).width() > 920 && $(window).width() < 1024){
    //These variables allow the glass to hold its background position on a window.resize.
    var scrollPos = $(window).scrollTop();
    var bouncePos2 = ((-1 * (scrollPos -215.75) * 1.25) + scrollPos).toFixed(2);
    $(".bottle1").css({ 'background-position': "368px 0"});
    $(".bottle2").css({ 'background-position': "73px 125px"});
    $(".glass").css({ 'background-position': "750px " + bouncePos2 + "px"});

    headerParallax = null;


    alert("off1")

    //headerParallax(null);

  }else if($(window).width() < 920){
    var scrollPos = $(window).scrollTop();
    var bouncePos2 = ((-1 * (scrollPos -215.75) * 1.25) + scrollPos).toFixed(2);
    $(".bottle1").css({ 'background-position': "150px 0"});
    $(".bottle2").css({ 'background-position': "-400px 125px"});
    $(".glass").css({ 'background-position': "470px "  + bouncePos2 + "px"});
    //window.requestAnimationFrame(headerParallax("150px ","-500px ", "600px "));
    headerParallax = null;

    alert("off2");

  }
}); //end windoResize

if($(window).width() > 1024 ){
  //window.requestAnimationFrame(headerParallax("368px ", "-452px ", "900px "));
  headerParallax("368px ","73px ", "750px ");

}else if($(window).width() > 920 && $(window).width() < 1024){

  headerParallax = null;


}else if($(window).width() < 920 ){
  //window.requestAnimationFrame(headerParallax("150px ","-500px ", "600px "));
  headerParallax = null;


}

Window Resize JS开启和关闭功能

0 个答案: