在封面图像之后缩小导航栏

Question

我正在使用Bootstrap 4从头开始构建一个网站。这个想法是有一个全屏封面图像，顶部有一个"固定到位"的透明导航栏;这部分很容易，我几乎可以闭着眼睛做。我现在要实现的是一种效果，因此当用户向下滚动并点击封面图像的末尾时，导航栏将缩小并在顶部粘滞。

我找到了很多教程和指南来教如何在 Jquery 中执行此操作，但它们基本上都提供了代码，即在"这么多像素"之后使其缩小(在其 50 以下的示例的情况下(。我喜欢 Jquery 在类中添加然后删除该类的想法，但是我不确定如何修改，以便在它到达我的封面图像底部而不是 50px 时激活。

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

Answer 1

借助 jquery，您可以获得渲染图像的高度。

然后，您只需更改偏移参数。这是一支笔：https://codepen.io/anon/pen/KyQddz

<div class="navbar">
  This is my navbar
</div>
<figure>
  <img src="https://via.placeholder.com/350x80" />  
</figure>

* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
.navbar {
  background: red;
  width: 100%;
  height: 60px;
  position: fixed;
  top:0;  
}
.shrink {
  background: green;
}
figure {
  height: 2000px;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
var imgHeight;
$(window).on('load', function () {
  imgHeight = $('img').height();
});
$(window).scroll(function() {
  if ($(document).scrollTop() > imgHeight) {
    $('.navbar').addClass('shrink');
  } else {
    $('.navbar').removeClass('shrink');
  }
});

如果您希望仅在滚动图像高度后修复导航栏，只需position:fixed;top:0;移动到.shrink类即可。

.navbar {
      background: red;
      width: 100%;
      height: 60px; 
    }
    .shrink {
      background: green;
      position: fixed;
      top:0;
     }