滚动和鼠标事件动画 header

Question

我希望我的 header 在滚动时缩小，如果鼠标悬停在上面则调整大小，return 在鼠标离开时缩小（如果这是一个语法正确的句子）。

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

谢谢，请对一个卑微的菜鸟手下留情。

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/

Answer 2

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

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

示例添加到 Prakhar 的 fiddle 此处：http://jsfiddle.net/nam3tnxL/5/

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

滚动和鼠标事件动画 header

Scroll and mouse event animated header

jquery

animation

scroll

mouseevent