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和谷歌上得到了解决。您应该考虑将其标记为重复...

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

1 个答案: