Question

我有这样的情况：

父母在里面有一些其他的div和一个背景图片（通过CSS设置）。当用户向下滚动并包含文本时，会出现一个子div（类“slow-subtitle”）。

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

我想计算父div的BEFORE的高度，这样当子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将项目设置为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;
}

Answer 2

我认为使用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);
  }
});

在内容加载之前，根据内容更改div min-height

2 个答案: