Question

我创建了一个只有在窗口宽度超过769px时才能运行的功能。它在页面加载时有效，但在调整大小时无效...

看起来像这样：

$(window).on('load resize', function () {
    if ($(window).width() >= 769) {
       ...funcion...
    }
});

编辑：

以下完整代码

$(window).on('load resize', function () {
    if ($(window).width() >= 769) {
      var $element = $('#cont_quote');
      var $follow = $element.find('.img_quote');
      var followHeight = $element.find('.img_quote').outerHeight();
      var height = $element.outerHeight() - 300;
      var window_height = $(window).height();

      $(window).scroll(function () {
        var pos = $(window).scrollTop();
        var top = $element.offset().top;

        // Check if element is above or totally below viewport
        if (top + height - followHeight < pos || top > pos + window_height) {
          return;
        }

        var offset = parseInt($(window).scrollTop() - top);

        if (offset > 0) {
        $follow.css('transform', 'translateY('+ offset +'px)');
        }

      })
    }
});

HTML：

<section id="cont_quote">
    <article class="cont_q">
        Lorem ipsum 
        <img class="img_quote" src="img">
    </article>
</section>

Answer 1

尝试这样的事情：

$(document).ready(function(){
  $(window).resize(function(){
    if ($(window).width() >= 769) {
       ...funcion...
    }
  }
}

您可以根据需要更改就绪或加载，但该功能应在窗口调整大小时触发。

Answer 2

我认为你可以尝试这个解决方案，这只是javaScript

    var onWindowResize = function(e) {
           width = e.target.outerWidth;
           //uncomment if need height = e.target.outerHeight;
           if(width >= 769) {

               //remove alert just added for debug
               alert("if");
        }
           else{
             //remove alert
               alert("else");
               }
           }
        window.addEventListener("resize", onWindowResize);

如果窗口宽度不适用于调整大小

2 个答案: