借助Waypoints修改SVG fill属性失效，求修改及动画方案

看起来你遇到的问题其实有两个关键点：一是SVG的fill属性修改方式和普通DOM元素的background-color不同，二是你原来代码里的动画参数其实并没有生效（因为jQuery的css()方法不支持动画时长参数）。我来一步步帮你解决：

一、先解决Fill属性修改失效的问题 #

首先，你要确认fill属性到底是作用在<svg>标签本身，还是它内部的<path>、<circle>等图形元素——大部分情况下，fill是设置在具体的图形元素上，而不是外层的svg标签。所以你的选择器可能需要调整：

情况1：fill作用在svg标签本身 #

直接用jQuery的css()方法修改即可，写法要正确：

var waypoint = new Waypoint({
  element: document.getElementById('content-intro'),
  handler: function(direction) {
    $("#stickylogo svg").css('fill', 'red');
    // 或者对象写法：$("#stickylogo svg").css({ fill: 'red' });
  }
});

情况2：fill作用在svg内部的图形元素（比如path） #

这是更常见的场景，你需要把选择器指向内部元素：

var waypoint = new Waypoint({
  element: document.getElementById('content-intro'),
  handler: function(direction) {
    $("#stickylogo svg path").css('fill', 'red');
    // 如果有多个图形元素，比如circle、rect，可以用更通用的选择器：$("#stickylogo svg *")
  }
});

二、实现更流畅的动画效果 #

你原来代码里的'5000'参数其实是无效的，因为css()方法只负责修改样式，不支持动画。要实现fill属性的过渡动画，用CSS Transition是最优方案，性能更好也更易维护：

步骤1：添加CSS过渡样式 #

先给目标元素加上过渡效果，把动画规则写在CSS里：

/* 假设目标是svg内部的path元素 */
#stickylogo svg path {
  fill: #你的默认颜色; /* 初始颜色 */
  transition: fill 0.5s ease; /* 0.5秒过渡，ease是缓动效果，可调整 */
}

/* 定义激活状态的类，方便切换 */
#stickylogo svg path.logo-active {
  fill: red; /* 滚动触发后的颜色 */
}

步骤2：在Waypoints中切换类 #

用toggleClass()来切换样式类，比直接修改CSS属性更优雅，还能根据滚动方向做不同处理：

var waypoint = new Waypoint({
  element: document.getElementById('content-intro'),
  handler: function(direction) {
    // 向下滚动时添加类，向上滚动时移除
    $("#stickylogo svg path").toggleClass('logo-active', direction === 'down');
  },
  // 可选：设置触发位置，比如元素顶部到达视口一半时触发
  offset: '50%'
});

为什么原来的代码会失效？ #

1. 选择器可能不准确：如果fill属性是在内部图形元素上，而你只选中了外层svg标签，自然看不到变化；
2. jQuery版本兼容性：如果你的jQuery版本较旧，用css()修改SVG属性可能会有问题，这种情况下可以尝试用attr()方法（比如$("#stickylogo svg path").attr('fill', 'red')），不过更推荐前面的CSS过渡方案。

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