使用Bootstrap+jQuery Transit实现导航栏滚动过渡 回退时效果失效

根因分析 #

1. 过渡效果失效：scroll事件在滚动过程中会高频触发，你当前的写法会在每次滚动时都反复调用transition方法，前一次未完成的动画会被后一次调用强制中断，最终表现为没有过渡效果。
2. 刷新后样式异常：页面加载完成后不会自动触发scroll事件，因此如果刷新时滚动位置已经超过阈值，导航栏不会自动应用对应样式。
3. 隐藏语法问题：代码中color: '#e89a9f;'的颜色值多带了分号，会导致颜色解析失败，影响过渡效果。

修复步骤 #

• 新增状态变量记录导航栏当前的样式状态，只有状态切换时才执行过渡动画，避免高频重复触发
• 将导航栏样式判断逻辑封装为独立函数，页面加载完成后主动调用一次，同时绑定到scroll事件
• 移除颜色值中多余的分号

修复后代码 #

// 初始化导航栏状态标记
let navbarScrolled = false;
// 此处替换为你自己的bottom_of_Karussel取值逻辑即可
const bottom_of_Karussel = $('#你的轮播模块选择器').offset().top + $('#你的轮播模块选择器').outerHeight();

// 封装导航栏样式更新逻辑
function updateNavbarStyle() {
  const top_of_screen = $(window).scrollTop();
  // 只有状态发生变化时才执行动画，避免重复触发
  if (top_of_screen > bottom_of_Karussel && !navbarScrolled) {
    navbarScrolled = true;
    //Logo
    $('.navbar-dark .navbar-brand').transition({color: '#cd212a', duration: '1200'});
    //Background
    $('nav').transition({backgroundColor: '#f4f5f0', duration: '1200'});
    //active Link
    $('.navbar-dark .navbar-nav .nav-link.active').transition({color: '#cd212a', duration: '1200'});
    //show Link
    $('.navbar-dark .navbar-nav .show > .nav-link').transition({color: '#cd212a', duration: '1200'});
    //inactive Links
    $('.navbar-dark .navbar-nav .nav-link').transition({color: '#e89a9f', duration: '1200'});
  } else if (top_of_screen <= bottom_of_Karussel && navbarScrolled) {
    navbarScrolled = false;
    //Logo
    $('.navbar-dark .navbar-brand').transition({color: '#f4f5f0', duration: '1200'});
    //background
    $('nav').transition({backgroundColor: '#cd212a', duration: '1200'});
    //active Link
    $('.navbar-dark .navbar-nav .nav-link.active').transition({color: '#f4f5f0', duration: '1200'});
    //show Link
    $('.navbar-dark .navbar-nav .show > .nav-link').transition({color: '#f4f5f0', duration: '1200'});
    //inactive Links
    $('.navbar-dark .navbar-nav .nav-link').transition({color: '#e89a9f', duration: '1200'});
  }
}

// 页面加载完成后主动执行一次，解决刷新样式异常问题
$(document).ready(function() {
  updateNavbarStyle();
});

// 绑定滚动事件
$(window).scroll(updateNavbarStyle);

内容的提问来源于stack exchange，提问作者Evis