javascript - 如何在导航栏上重新定位品牌形象？

Question

我正在尝试制作一个导航栏，在向下滚动时可以重新定位品牌形象，就像 http://www.agilent.com/home 上显示的示例一样

我知道如何使用 jquery 添加类，但我不知道如何在向下滚动时添加图像，或者是否有任何其他方法可以实现这种效果。

我怎样才能达到这个效果？提前致谢!

Answer 1

您需要使用两张图片。一个在标题上，一个在导航上。

此代码段将检测导航栏是否在顶部并将 sticky 类添加到导航元素。

$(window).scroll(function() {
  if ($(window).scrollTop() > $("nav").offset().top) {
    $("nav").addClass("sticky");
  } else {
    $("nav").removeClass("sticky");
  }
});

当导航元素使用sticky类时，它应该显示导航标志。

nav .logo {
  display: none;
}
nav.sticky {
  position: fixed;
  top: 0;
}
nav.sticky .logo {
  display: inline;
}

jsfiddle demo