Bootstrap中自适应导航栏Logo滚动切换响应式适配问题求解

解决思路 #

当前Logo切换逻辑仅判断页面滚动距离，未适配响应式断点下的导航栏背景规则：视口宽度≤992px时导航栏默认背景为白色，无需等待滚动就应该显示黑色Logo。

修改方案 #

方案1：调整原有JS逻辑（适配现有代码习惯） #

在Logo切换逻辑中新增视口宽度判断，同时增加窗口大小变化监听，适配用户手动调整浏览器宽度的场景，修改后完整JS代码如下：

(function($) {
  "use strict";

  // Collapse Navbar 
  var navbarCollapse = function() {
    // 判断是否为桌面端（宽度>992px）
    const isDesktop = $(window).width() > 992;
    // 移动端直接显示黑色Logo
    if (!isDesktop) {
      $("#mainNav").addClass("navbar-shrink");
      $(".logo").attr("src", "https://www.orticaweb.it/wp-content/uploads/2019/09/Twitter-00-Logo-Nero.png");
      return;
    }
    // 桌面端保留原有滚动判断逻辑
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink")
      $(".logo").attr("src", "https://www.orticaweb.it/wp-content/uploads/2019/09/Twitter-00-Logo-Nero.png");
    } else {
      $("#mainNav").removeClass("navbar-shrink")
      $(".logo").attr("src", "https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png");
    }
  };
  // 页面加载时立即执行适配
  navbarCollapse();
  // 监听页面滚动触发适配
  $(window).scroll(navbarCollapse);
  // 监听窗口大小变化触发适配
  $(window).resize(navbarCollapse);

  // Smooth scrolling using jQuery easing 
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (
      location.pathname.replace(/^\//, "") ==
      this.pathname.replace(/^\//, "") &&
      location.hostname == this.hostname
    ) {
      var target = $(this.hash);
      target = target.length ?
        target :
        $("[name=" + this.hash.slice(1) + "]");
      if (target.length) {
        $("html, body").animate({
            scrollTop: target.offset().top - 70,
          },
          1000,
          "easeInOutExpo"
        );
        return false;
      }
    }
  });

})(jQuery);

可以额外为resize事件添加防抖逻辑，避免频繁调整窗口大小时触发多次执行，提升性能。

方案2：纯CSS实现（更稳定，无Logo加载闪烁） #

无需修改JS逻辑，通过媒体查询控制两个Logo的显隐，适配所有场景：

1. 修改HTML的Logo部分代码

<a class="navbar-brand js-scroll-trigger" href="#home">
  <img class="img-fluid logo logo-mobile" src="https://www.orticaweb.it/wp-content/uploads/2019/09/Twitter-00-Logo-Nero.png" width="50px">
  <img class="img-fluid logo logo-desktop" src="https://loghi-famosi.com/wp-content/uploads/2020/04/Twitter-Logo-650x366.png" width="50px">
  Logo Agency
</a>

2. 新增对应CSS规则

/* 移动端默认显示黑色Logo */
.logo-desktop {
  display: none;
}
@media (min-width: 992px) {
  /* 桌面端默认显示白色Logo */
  .logo-desktop {
    display: inline-block;
  }
  .logo-mobile {
    display: none;
  }
  /* 桌面端导航栏收缩时切换为黑色Logo */
  #mainNav.navbar-shrink .logo-desktop {
    display: none;
  }
  #mainNav.navbar-shrink .logo-mobile {
    display: inline-block;
  }
}

使用该方案后可以删除原有JS中修改Logosrc属性的代码，仅保留导航栏navbar-shrink类的切换逻辑即可。

内容的提问来源于stack exchange，提问作者Elia d'Albenzio