Question

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

我发现了很多教程和指南，教会了如何在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;
     }

收缩导航栏后盖图像

1 个答案: