javascript - 在改变网站宽度的同时改变主要的偏移量

Question

网站顶部是固定图片，正下方是所有内容的主要部分。起初我的主要偏移量有问题，但我终于弄明白了，但现在，当我调整窗口大小时，它不会改变它的偏移量，直到我刷新我的页面。有什么方法可以解决这个问题，所以每当我调整窗口大小时我位于页面顶部时，电源偏移高度和顶部图片都会发生变化。这是我的 CS:

#first_image {
        width : 100%;
        min-width: 1100px;
        position: fixed;
        top : 0;
        left : 0;
        z-index: -2;
      }

      main {
        width:100%;
        position:relative;
        top:;
        background-color: black;
        z-index: 100;
        padding-top:25px;
      }

JS:

var img = document.getElementById('first_image');
var height = img.clientHeight;

$(".maintext").css({ top: height });

编辑:.maintext 是 main 的类。

Answer 1

在 $(window).resize(); 事件处理程序中调用相同的代码。这是完整的代码，将您正在执行的调整图像大小的操作添加到一个函数中，这样您就可以在页面加载时自行调用该函数，并在调整窗口大小时调用它。

$(function() {
  function imageHeight() {
    var img = document.getElementById('first_image');
    var height = img.clientHeight;
    $(".maintext").css({ top: height });
  }
  $(window).resize(function() {
    imageHeight();
  });
  imageHeight();
});