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

Question

我有这样的情况:

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

现在，当子div出现时，父div会相应改变高度，但有时背景图片会因为div的新高度而跳动。我通过将父 div 最小高度设置为涵盖大多数情况的高值解决了这个问题(我有几个页面包含此代码)但是当子 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>        

JS

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

Answer 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;
}