时间戳

首页 > 解决方案 > 唤醒时在滚动时更改引导导航栏图像

scroll - 唤醒时在滚动时更改引导导航栏图像

问题描述

我被卡住了，我不知道如何在滚动过程中更改图像源（白色徽标到黑色徽标）。这是我正在处理的页面的链接： https ://www.camarilloflightinstruction.com/sandbox/2020/index.html

如果您滚动页面，您会注意到徽标将字体格式从 WHITE FRONT W/ DARK Background 更改为 BLACK FONT W/ White Background

有人可以指出我正确的方向吗？

标签： scrollnavbar

解决方案

您可以创建一个 jquery.scroll()事件来测试scrollTop()窗口的值（检查页面是否在顶部附近滚动），然后src根据该值更改图像的属性。.scrollTop()向下滚动时，窗口的值将增加。

尝试将其添加到元素的最后<body>，在其他<script>元素之后：

<script>

  var base = 'https://www.camarilloflightinstruction.com/sandbox/2020/images/';

  $(window).scroll(function(){
    if($(this).scrollTop() > 100){
      $('nav.navbar .navbar-brand img').attr('src', base + 'CFI_black.png')
    }
    else {
      $('nav.navbar .navbar-brand img').attr('src', base + 'CFI_white.png')
    }
  })

</script>

推荐阅读