如果/当浏览器调整大小时更改变量的值

Question

首先，我是一个完全的初学者。

我有 3 个 div（div1、div2 和 div3）。

div1、div2 和 div3 以该顺序出现在源代码中。

div1 有一个固定的高度，div2 的高度设置为填充可见视口空间的其余部分。然后，当您向下滚动时，您将进入 div3。

我想给 div3 负上边距，等于 div2 的高度。

我能够在页面加载时计算 div2 的高度并将 div2 的高度作为负上边距应用到 div3，但是如果/当浏览器调整大小时，我想重新计算 div2 的高度，然后将其作为负上边距重新应用到 div3。

这是我走了多远：

jQuery(document).ready(function($) {
var headerHeight;
var topHeight;
var correctHeight;

function setWidth() {
headerHeight= $("#header-space").height();
    topHeight = $( window ).height(); 
correctHeight = topHeight - headerHeight;

};

setWidth();

$(window).resize(setWidth);

$(".anchorsnav").css("margin-top", '-' + correctHeight + 'px');

});

我知道很可能有更好的方法来实现我在这里尝试的效果，但为了外行，让我们假设标记 (div1..div2..div3) 是我必须要做的一起工作。

Answer 1

在setWidth() 中调用.css()，这样在你调整大小时就会完成。

jQuery(document).ready(function($) {
  var headerHeight;
  var topHeight;
  var correctHeight;

  function setWidth() {
    headerHeight = $("#header-space").height();
    topHeight = $(window).height();
    correctHeight = topHeight - headerHeight;
    $(".anchorsnav").css("margin-top", '-' + correctHeight + 'px');
  };

  setWidth();
  $(window).resize(setWidth);
});

您可能还想将debouncing 添加到您的调整大小处理程序中，这样它在用户完成调整大小之前不会运行。