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

Question

我一整天都在讨论一个棘手的逻辑问题。

我有一个标题，我想要折叠成一个小方块，一旦用户滚动过60px标记（Y坐标）。我希望头部在用户悬停在广场上时重新展开。

JSFiddle of what I have so far

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