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

【问题标题】：Change div min-height according to content, before content loads在内容加载之前根据内容更改 div 最小高度
【发布时间】：2018-03-29 19:25:49
【问题描述】：

我有这样的情况：

父级内部还有一些其他 div 和背景图像（通过 CSS 设置）。当用户向下滚动并包含文本时，会出现其中一个子 div（“slow-subtitle”类）。

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

我想在之前计算父 div 的高度，这样当子 div 加载时，没有任何跳转并且页面正确呈现。

这是我的代码

HTML

<div class="container-fluid slow-title-box">    
<div class="row">
    <div class="col-lg-6">         
        <h1 class="h1-bg">Title</h1>
        <div class="slow-subtitle">
            <h4>Text</h4>
            <p>More text</p>    
        </div>    
    </div>
</div>

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

【问题讨论】：

如果您以内容空间开始页面，为什么要隐藏它？或者如果你不希望背景图片跳跃，为什么不使用像向下滑动这样的效果，这样背景会随着内容的显示而向下滑动。否则，只需使用不透明度 0，然后内容将保持其空间，然后您可以将不透明度设置为 1

标签： javascript jquery html css

【解决方案1】：

因为fadeIn 和fadeOut 将item 设置为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");
  }
});

.slow-subtitle {
  transition: all .3s ease;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

【讨论】：

此解决方案完美运行，谢谢！我本来可以考虑的，我最终会到达那里

【解决方案2】：

我认为用真/假你可以做到这一点

$(".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);
  }
});

【讨论】：