如何在固定引导导航栏上方创建折叠徽标 div

Question

我需要创建一个具有整个页面宽度的 div，它可以容纳一个背景图像和一个随着向下滚动而减小的徽标图像。我已经尝试了一些尝试，但似乎无法破解它。可以在此处找到一个完美的执行示例：http://www.starwars.com/

编辑： 现在设法让某些东西正常工作，但是当我向上滚动时，导航栏会短暂地向下移动页面，在 z-index 下方显示一个图层，当它到达底部时它不会显示。

$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $("#contentcollapse");
var objectPosition = objectSelect.offset().top;
if (scroll > 400) {
    $(".navscroll").addClass("navstick");
    $(".navstick").removeClass("navscroll");
} else {
    $(".navstick").addClass("navscroll");
    $(".navscroll").removeClass("navstick");
}
});

类的变化之间会有某种动画过渡有什么原因吗？

Answer 1

https://codepen.io/tomdurkin/pen/nvAjd

    $(document).on("scroll", function(){
    if
  ($(document).scrollTop() > 100){
      $("header").addClass("shrink");
        updateSliderMargin();
    }
    else
    {
        $("header").removeClass("shrink");
        updateSliderMargin();
    }
});

这是一个可以做你想做的事情的代码笔（这是不是我的代码，而是 Tom Durkin 的） 这个问题已经在 SO 和 google 上得到解决。您应该考虑将其标记为重复...