如何防止FadeIn / Out随扩展/折叠标题而闪烁？

Question

我整天都在烦人的逻辑问题。

我有一个标题，一旦用户滚动超过60px标记（Y坐标），我就想折叠成一个小方块。 当用户将鼠标悬停在正方形上时，我希望页眉重新展开。

到目前为止我所拥有的

HTML

<div class="header">Header
  <div class="nav">Nav items nav items nav items</div>
</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

CSS

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background-color: red;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.header.collapsed {
  width: 60px;
}

.body {
  padding-top: 80px;
}

jQuery的

function collapseHeader() {
  $(".header").addClass("collapsed");
  $(".nav").fadeOut(200);
}

function expandHeader() {
  $(".header").removeClass("collapsed");
  $(".nav").fadeIn(200);
}

$(document).ready(function(){
  $(".header").mouseover(function() {
    if ($(window).scrollTop() > 60) {
      expandHeader();
    }
  });
  $(".header").mouseout(function() {
    if ($(window).scrollTop() > 60) {
      collapseHeader();
    }
  });

  $(window).scroll(function(){

      if ( ($(window).scrollTop() > 60) && ($('.header:hover').length == 0) ) {
        collapseHeader();
      }
      else {
        expandHeader();
      }
  });

});

问题：本应淡入和淡出的标题内容开始疯狂闪烁。 如何停止闪烁？

Answer 1

使用mouseenter和mouseleave函数，而不是mouseover和mouseout

http://jsfiddle.net/f90jLmoa/4/

Answer 2

只需使用hover()

$(".header").hover(
     function() {
        if ($(window).scrollTop() > 60) {
          expandHeader();
        }
      }),
      function() {
        if ($(window).scrollTop() > 60) {
          collapseHeader();
        }
});