如何通过展开/折叠标题防止淡入/淡出闪烁？

Question

我整天都在努力解决一个讨厌的逻辑问题.

我有一个标题,一旦用户滚过60px标记(Y坐标),我想折叠成一个小方块.当用户将鼠标悬停在方块上时,我希望标题重新展开.

JSFiddle我到目前为止所拥有的

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/