封面图片后缩小导航栏

Question

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

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

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