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

将来自.css()的来电置于setWidth()，以便在您调整大小时完成。

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添加到调整大小处理程序中，因此在用户完成调整大小之前它不会运行。

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

1 个答案: