Javascript 在加载内容之前，根据内容更改div最小高度

我的情况是这样的：

父对象内部有几个其他div和一个背景图像（通过CSS设置）。当用户向下滚动时，其中一个子div（class“slow subtitle”）出现，其中包含文本

现在，当子div出现时，父div会相应地改变其高度，但有时背景图像会因为div的新高度而跳跃。我通过将父div min height设置为一个涵盖大多数情况的高值来解决这个问题（我有几页代码）但是，当child div的内容较短时，它会留下一个很大的空白

我想先计算父div的高度，这样当加载子div时，不会发生任何跳跃，页面也会正确呈现

这是我的密码

HTML

---

因为

fadeIn

和

fadeOut

将项目设置为

display:none

，这就是您面临背景图像跳转问题的原因

不要使用

fadeIn

和

fadeOut

，而是尝试添加和删除一个类，并使用

opacity

…它还将提供淡入淡出效果

$(".slow-subtitle").addClass("hidden");
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 50) {
    $('.slow-subtitle').removeClass("hidden");
  } else {
    $('.slow-subtitle').addClass("hidden");
  }
});

。慢字幕{
过渡：全部。3秒轻松；
}
.隐藏{
不透明度：0；
可见性：隐藏；
}

我认为使用true/false可以做到这一点

$(".slow-subtitle").hide();
var slowsubtitle_hide = true;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 50 && slowsubtitle_hide == true) {
    slowsubtitle_hide = false;
    $('.slow-subtitle').stop().fadeIn(700);
  } else if (y < 50 && slowsubtitle_hide == false){
    slowsubtitle_hide = true;
    $('.slow-subtitle').stop().fadeOut(700);
  }
});    

$（“.slow subtitle”）.hide（）；
var slowsubtitle_hide=true；
$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y>50&&slowsubtitle\u hide==true）{
slowsubtitle_hide=false；
$（'.slow subtitle'）.stop（）.fadeIn（700）；
}else if（y<50&&slowsubtitle\u hide==false）{
slowsubtitle_hide=true；
$（'.slow subtitle'）.stop（）.fadeOut（700）；
}
});    

如果你要用内容的空间开始页面，为什么要隐藏它？或者如果你不想背景图像跳转，为什么不使用像“向下滑动”这样的效果，这样背景会随着内容的显示而向下滑动。否则，只需使用“不透明度0”，然后内容将保留其空间，然后你就可以将不透明度设置为1这个解决方案完美无瑕，谢谢！我本可以考虑一下，我最终会到达那里的

$(".slow-subtitle").addClass("hidden");
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 50) {
    $('.slow-subtitle').removeClass("hidden");
  } else {
    $('.slow-subtitle').addClass("hidden");
  }
});

$(".slow-subtitle").hide();
var slowsubtitle_hide = true;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 50 && slowsubtitle_hide == true) {
    slowsubtitle_hide = false;
    $('.slow-subtitle').stop().fadeIn(700);
  } else if (y < 50 && slowsubtitle_hide == false){
    slowsubtitle_hide = true;
    $('.slow-subtitle').stop().fadeOut(700);
  }
});