jquery - 为什么窗口调整大小不起作用，除了页面加载？

Question

当用户在其下方滚动时，我需要让侧边栏元素保持粘性，除非在移动设备上它应该像正常一样滚动。我可以让它在页面加载时工作，但是如果你向下拖动窗口大小，它不会再次触发 resize() 。我希望在窗口大小发生变化时触发它。非常感谢任何帮助。

我的 jQuery：

jQuery(document).ready(function($) {
  $(window).resize(function() {
    if ($(".jump-to").length) {
      if ($(window).width() > 1024) {
        var jumpToTop = $(".jump-to").offset().top - 156;
        $(window).scroll(function() {
          if ($(window).scrollTop() > jumpToTop) {
            $(".jump-to").addClass("sticky-jump-to");
          }
          else {
            $(".jump-to").removeClass("sticky-jump-to");
          }
        });
      }
    }
  });
});

标签： jquery

Answer 1

您将scroll-Event 设置为，resize-Event但您必须单独定义它。我希望我明白了你的想法，所以下面的例子可能会对你有所帮助。

$(document).ready(function() {
  // save elements in variables for better performance
  var $window = $(window),
    $jumpTo = $('#jump-to'),
    jumpToLimit = $jumpTo.offset().top - $jumpTo.height();

  // add triggers like that - not in each other
  $window.on({
    resize: onWindowResize,
    scroll: onScroll
  });

  function onWindowResize() {
    if ($jumpTo.length) {
      if ($window.width() <= 1024) {
        $jumpTo.removeClass('sticky-jump-to');
      } else if ($window.scrollTop() > jumpToLimit) {
        $jumpTo.addClass('sticky-jump-to');
      }

      jumpToLimit = $jumpTo.offset().top - $jumpTo.height();
    }
  }

  function onScroll() {
    if ($jumpTo.length && $window.width() > 1024) {
      if ($window.scrollTop() > jumpToLimit) {
        $jumpTo.addClass('sticky-jump-to');
        return;
      }
    }

    $jumpTo.removeClass('sticky-jump-to');
  }
});

.something {
  height: 600px;
  background: #dd8800;
}

#jump-to {
  width: 100%;
  height: 25px;
  background: #008800;
}

#jump-to.sticky-jump-to {
  position: fixed;
  top: 0px;
  left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="something"></div>
<div id="jump-to"></div>
<div class="something"></div>