滚动鼠标事件动画标题

Question

我希望我的标题在滚动时收缩，如果鼠标移到上面，则调整大小，然后在鼠标离开时返回到收缩状态（如果这是语法正确的句子）。

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

谢谢你，请怜悯一个卑微的角落。

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");
     }

这是经过改装的小提琴：http://jsfiddle.net/nam3tnxL/4/

Answer 2

Prakhar已经很好地回答了这个问题，但值得一提的是，当在同一元素上使用mouseenter和mouseleave时，jQuery.haverage（）是一个快捷方式。例如：

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

添加到Prakhar小提琴中的示例如下：http://jsfiddle.net/nam3tnxL/5/

如果您已经在使用jQuery，它可能会使代码更易于管理：）