▶

前期尝试

导航栏在页首时会隐藏，而阴影还会在。下面是简单粗暴地将阴影设为零的方法。
位置Blog\themes\fluid\source\css\_pages\_base\_widget\header.styl

.navbar
  background-color transparent
  font-size 0.875rem
  box-shadow 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12)
  -webkit-box-shadow 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12)

修改为0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12)

导航栏变化原理

1. 初始化：页面加载时，registerNavbarEvent 函数被调用，注册滚动事件监听器
   ▶

   滚动事件监听器

   在 Blog\themes\fluid\source\js\events.js 文件中，registerNavbarEvent 函数实现了滚动位置检测：

   // 注册导航栏滚动事件
   registerNavbarEvent: function() {
     var navbar = jQuery('#navbar');
     if (navbar.length === 0) {
       return;
     }
     var submenu = jQuery('#navbar .dropdown-menu');
     if (navbar.offset().top > 0) {
       navbar.removeClass('navbar-dark');
       submenu.removeClass('navbar-dark');
     }
     // 监听滚动事件
     Fluid.utils.listenScroll(function() {
       // 当滚动超过50px时添加毛玻璃效果类，否则移除
       navbar[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('top-nav-collapse');
       submenu[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('dropdown-collapse');
       if (navbar.offset().top > 0) {
         navbar.removeClass('navbar-dark');
         submenu.removeClass('navbar-dark');
       } else {
         navbar.addClass('navbar-dark');
         submenu.removeClass('navbar-dark');
       }
     });
     // 其他代码...
   }

2. 滚动检测：当用户滚动页面时，listenScroll 函数触发回调
   ▶

   滚动监听

   在 Blog\themes\fluid\source\js\utils.js 文件中，listenScroll 函数实现了滚动事件的防抖处理：

   // 监听滚动事件（带防抖）
   listenScroll: function(callback) {
     var dbc = new Debouncer(callback);
     window.addEventListener('scroll', dbc, false);
     dbc.handleEvent();
     return dbc;
   }

3. 类名切换：JavaScript 根据滚动位置（navbar.offset().top > 50）添加或移除 top-nav-collapse 类
4. 毛玻璃效果：CSS 检测到 top-nav-collapse 类后，应用 ground-glass 函数实现毛玻璃效果
5. 响应式变化：当滚动回到顶部时，移除 top-nav-collapse 类，毛玻璃效果消失

关键参数

• 滚动阈值：50px（当滚动超过这个值时触发毛玻璃效果）
• 毛玻璃效果类：top-nav-collapse（导航栏）和 dropdown-collapse（下拉菜单）
• 毛玻璃配置：
  • $navbar-glass-px：毛玻璃模糊像素
  • $navbar-bg-color：导航栏背景颜色
  • $navbar-glass-alpha：毛玻璃透明度

核心修改

在 Blog\themes\fluid\source\js\events.js 文件中：

• 实现平滑滚动效果：根据滚动位置计算滚动比例（0-1）
• 平滑改变毛玻璃透明度：滚动时不透明度从0逐渐增加
• 注释掉页首取消毛玻璃效果的代码：确保毛玻璃效果在整个滚动过程中保持
• 从配置文件自动获取主题色：
• 设置非线性滚动效果：修改系数为先慢后快的指数变化

  var exponent = 1.5; // 指数系数，大于1时实现开始慢后面快的效果
  var nonlinearScrollRatio = Math.pow(scrollRatio, exponent);

▶

核心代码

Fluid.utils.listenScroll(function() {
  var scrollTop = jQuery(window).scrollTop();
  var maxScroll = 350; // 最大滚动距离，超过此值后效果不再变化
  var scrollRatio = Math.min(scrollTop / maxScroll, 1); // 滚动比例，范围0-1
  
  // 非线性滚动比例计算（开始慢，后面快）
  var exponent = 1.3; // 指数系数，大于1时实现开始慢后面快的效果
  var nonlinearScrollRatio = Math.pow(scrollRatio, exponent);
  
  // 平滑添加/移除类（根据滚动比例）
  if (scrollRatio > 0) {
	navbar.addClass('top-nav-collapse');
	submenu.addClass('dropdown-collapse');
  } else {
	navbar.removeClass('top-nav-collapse');
	submenu.removeClass('dropdown-collapse');
  }
  
  // 平滑改变导航栏高度（根据滚动比例）
  var defaultPadding = 12; // 默认 padding
  var collapsedPadding = 5; // 折叠后 padding
  var currentPadding = defaultPadding - (defaultPadding - collapsedPadding) * nonlinearScrollRatio;
  navbar.css('padding-top', currentPadding + 'px');
  navbar.css('padding-bottom', currentPadding + 'px');
  
  // 平滑改变毛玻璃效果的透明度（根据滚动比例）
  var alpha = scrollRatio * 0.7; // 最大不透明度
  // 从 CSS 变量中获取当前主题的导航栏背景色
  var navbarBgColor = getComputedStyle(document.documentElement).getPropertyValue('--navbar-bg-color').trim();
  // 将十六进制颜色转换为 RGB
  var rgbColor = hexToRgb(navbarBgColor);
  if (rgbColor) {
	navbar.css('background', 'rgba(' + rgbColor.r + ', ' + rgbColor.g + ', ' + rgbColor.b + ', ' + alpha + ')');
  }
  navbar.css('-webkit-backdrop-filter', 'blur(10px)');
  navbar.css('backdrop-filter', 'blur(10px)');
		
  // 注释掉页首取消毛玻璃效果的代码
  // if (navbar.offset().top > 0) {
  //   navbar.removeClass('navbar-dark');
  //   submenu.removeClass('navbar-dark');
  // } else {
  //   navbar.addClass('navbar-dark');
  //   submenu.removeClass('navbar-dark');
  // }
});

▶

动态获取主题色

/**
 * 将十六进制颜色转换为 RGB 对象
 * @param {string} hex 十六进制颜色值
 * @returns {object|null} RGB 对象 {r, g, b} 或 null
 */
function hexToRgb(hex) {
  // 移除 # 号
  hex = hex.replace(/^#/, '');
  
  // 处理缩写形式（如 #fff 转换为 #ffffff）
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  
  // 解析十六进制值
  var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}