Jquery 封面图像后收缩导航栏

我正在使用Bootstrap4从头开始构建一个网站。其想法是在顶部有一个“固定到位”透明导航条的全屏封面图像；这部分很简单，我几乎可以闭上眼睛完成。我现在试图实现的是这样一种效果，当用户向下滚动并点击封面图像的末尾时，导航栏将向下收缩并在顶部粘滞

我发现有很多教程和指南教我如何在Jquery中实现这一点，但它们基本上都提供了代码，在示例中，在低于50像素的情况下，使其在“如此多像素”后收缩。我喜欢Jquery添加一个类然后删除该类的想法，但是我不确定如何修改它，以便在它到达封面图像底部而不是50px时激活它

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

---

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

然后，只需更改偏移参数。这是一支钢笔：

---

尝试获取封面图像的底部位置，并相应地更改代码。@camelsWriteInCamelCase Errr我认为这不是最好的方法。。我的封面图像可以延伸到您的显示器的大小。。。因此，每个人都会根据屏幕分辨率的不同而有不同的底部位置。@user3599852只需获取图像的高度，如果达到像素高度，则表示达到底部，具体取决于具体情况，您可能需要添加navbar@Kangouroops就像我对上面提出同样建议的人说的。这不是一个好的解决方案，因为图像被设置为覆盖整个屏幕，因此图像的高度将根据您的屏幕显示而拉伸。这意味着每个人都有不同的图像高度，这取决于他们屏幕的分辨率。@user3599852这就是为什么你用javascript获得高度。我说的不是原始图片的高度，而是渲染图片的高度。它可能在窗户上。加载…这太完美了！谢谢，我已经把你列为最佳答案。我能再麻烦你一件事吗？有没有可能使导航条固定在顶部的位置，以便在向下滚动时不会在图像上移动？我有点希望它被修复，然后在它到达图像底部时变得粘乎乎的。@user3599852你不必打扰我，别担心。你的意思是，导航栏不粘，一旦你到达图像底部，它就会变粘？非常感谢你迄今为止的帮助！如果我给你看一个例子，可能会更容易些——你会注意到，在这个网站上，菜单是如何固定在封面图像顶部的位置上的，然后一旦你向下滚动并通过图像，导航栏就会缩小，并与网站的其余部分粘在一起。我想我知道如何使用Bootstrap，但我想我只是在征求第二个意见哈哈..好吧，移动位置：固定；排名：0；去心理医生班。我会编辑我的回答我很高兴能帮上忙；

<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');
  }
});

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