在调整大小时更改元素的高度

Question

大家好，我正在尝试动态更改元素的高度。 这些是我的变量。

var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();

现在我想要的是当窗口宽度和当前宽度之间的差异小于 6 时，我想更改元素的高度。我想每次（windowWidth - currentWidth）

$( window ).bind("resize", function(){
    if((windowWidth - currentWidth)<6) {
        $("#line4").css('height', elementHeight-14);
    }
});

它不起作用，我不知道我错过了什么。还跟进问题我可以通过这种方式更改其他 CSS 属性。对于这个特殊问题，我还需要以同样的方式更改 css top 属性，因为我有一些具有绝对位置的 div。

Answer 1

您需要在每次调整大小事件时测量窗口的当前宽度，因为它也在变化。

var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();

$( window ).bind("resize", function(){
  currentWidth = $(window).width()
  if((windowWidth - currentWidth)<6) {
    $("#line4").css('height', elementHeight-14);
  }
});

Answer 2

每次调用 resize 事件时都需要获取 windowWidth 您应该在resize 事件中添加去抖动以获得更好的性能。 我经常这样做，也许你可以搜索任何更好的方法：

var resizeTimer;
$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

  // Run code here, resizing has "stopped"
  currentWidth = $(window).width()
  if((windowWidth - currentWidth)<6) {
    $("#line4").css('height', elementHeight-14);
  }

  }, 250);
});

我创建了这个来测试，你可以试试。顺便说一句，我从 6 增加到 600 以更容易检查：D https://codepen.io/huytran0605/pen/NgBEVO