滚动与悬停切换固定按钮类样式的问题求助

问题根源 #

1. animate方法使用错误：scroll事件里调用的.animate(200)不符合jQuery语法，属于无效代码，还可能引发逻辑冲突。
2. 行内样式覆盖类样式：hover动画会给按钮添加行内的width、border-radius样式，行内样式优先级远高于CSS类，所以即使滚动回顶部移除了roundButton类，行内的width:60px依然生效，导致按钮无法变回宽版。
3. hover与scroll逻辑冲突：hover的离开回调强制将宽度设为60px，没有判断当前页面是否处于顶部状态，直接覆盖了scroll的恢复逻辑。

修复后的完整代码 #

JavaScript #

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var $button = $('.roundButtonBig');
    
    // 根据滚动位置切换缩小类
    $button.toggleClass("roundButton", scrollTop > 100);
    
    // 滚动回顶部时，清除行内样式，让类样式重新生效
    if (scrollTop <= 100) {
        $button.stop(true, true).removeAttr('style');
    }
});

$('.roundButtonBig').hover(function() {
    var $this = $(this);
    // 仅当按钮处于缩小状态时，执行展开动画
    if ($this.hasClass('roundButton')) {
        $this.stop(true, true).animate({
            "color":"#efbe5c",
            "width":"200px",
            "border-radius": "62px"
        }, 200);
    }
}, function() {
    var $this = $(this);
    // 仅当页面不在顶部时，执行缩小动画
    if ($(window).scrollTop() > 100) {
        $this.stop(true, true).animate({
            "color":"#e8a010",
            "width":"60px",
            "border-radius": "50%"
        }, 200);
    } else {
        // 页面在顶部时，恢复初始样式
        $this.stop(true, true).removeAttr('style');
    }
});

CSS #

#screen {
  width:200px;
  height:4000px
}

.fixedButton{
    position: fixed;
    bottom: 0px;
    right: 0px; 
    padding: 20px;
}

.roundButtonBig {
    height: 60px;
    width: 200px;
    border:none;
    background-color:#6FB583;
    font-size: 2em;
    font-weight: bold;
    border-radius: 62px;
    color: white;
    text-align: center;
    cursor:pointer;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

.roundButton{
  height: 60px;
  width: 60px;  
  font-size: 2em;
  font-weight: bold;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="screen">
  <a class="fixedButton" href="">
   <div class="roundButtonBig"></div>
  </a>
</div>

关键改动说明 #

• 修正animate错误：移除了scroll事件中无效的.animate(200)调用。
• 清除行内样式：滚动回顶部时，通过removeAttr('style')清除hover动画添加的行内样式，让roundButtonBig类的原始样式生效。
• 增加状态判断：
  • 鼠标移入时，只有按钮处于缩小状态（带有roundButton类）才执行展开动画。
  • 鼠标移出时，只有页面不在顶部（scrollTop>100）才执行缩小动画，否则直接恢复初始宽版样式。
• 控制动画队列：使用.stop(true, true)终止未完成的动画，避免多次触发导致的动画堆积、延迟问题。

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