jquery - 滚动和鼠标事件动画标题

Question

我希望我的标题在滚动时缩小，如果鼠标悬停在其上方则调整大小，并在鼠标离开时恢复缩小(如果这是语法正确的句子)。

我的问题是，即使页面没有滚动，我的菜鸟代码也会使标题在鼠标离开时收缩，而我不希望这样。防止这种情况的最佳方法是什么？

谢谢，请对一个卑微的菜鸟仁慈。

http://jsfiddle.net/ex_jedi/nam3tnxL/1/

HTML

<header class="header"><h1>Shrinking Header</h1></header>

CSS

.header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 25px;
  height: 110px;
  background: #335C7D;
  color: #fff;
  font-family: sans-serif;
  transition: all 0.8s ease;
}

.scroll {
  font-size: 8px;
  height: 50px;
  background: #efc47D;
  text-align: left;
}

jQuery

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('.header').addClass("scroll");
  }
  else{
    $('.header').removeClass("scroll");
  }
});

$('.header').mouseenter(function() {
    $('.header').removeClass("scroll");
});

$('.header').mouseleave(function() {
    $('.header').addClass("scroll");
});

Answer 1

替换

$('.header').addClass("scroll");

与

     if($(window).scrollTop() > 1){
        $('.header').addClass("scroll");
     }

这是修改后的 fiddle :http://jsfiddle.net/nam3tnxL/4/