Jquery 스크롤 및 호버 글리치

Question

div (.dock)가 페이지 상단에 고정되었습니다. 아래로 스크롤하면 맨 위로 스크롤 할 때 사라지고 다시 나타납니다. 그건 잘 작동합니다. 도크를 나중에 페이지 아래로보기 위해 사용자는 메뉴 막대 (.hover-dock) 위로 마우스를 가져갈 수 있습니다. 이 호버 기능은> 200 스크롤 후에 만 ​​발생해야합니다.

이 기능은 초기에는 작동하지만 처음으로 돌아갈 때 호버 기능이 활성 상태가되어 도크가 잘 고정되어있을 때 혼란을 야기합니다. 여기서 내가 뭘 잘못하고 있니? 여기에 내 코드가있다 ...

$(window).scroll(function() { 

if ($(this).scrollTop()>200) 
{ 
    $('.dock').hide(); 
    $('#sticky-nav').css('padding-top', '30px'); 
    $('.feed').css('margin-top', '30px'); 



//Push down the filter and feed 
$('.hover-dock').hover(function(){ 
    $('.dock').show(); 
    $('#sticky-nav').css('padding-top', '125px'); 
    $('.feed').css('margin-top', '125px'); 
}, function(){ 
    $('.dock').hide(); 
    $('#sticky-nav').css('padding-top', '30px'); 
    $('.feed').css('margin-top', '30px'); 
}); 



} 
else if ($(this).scrollTop()<200) 
{ 
    $('.dock').show(); 
    $('#sticky-nav').css('padding-top', '125px'); 
    $('.feed').css('margin-top', '125px'); 
} 
}); 

Answer 1

만약 내가 너라면, 나는 이렇게했을 것이다. 호버 핸들러를 scroll() 함수 외부에 추가합니다. 그리고 호버 동안 scrollTop()이 200px 이상 또는 200px인지 알아보기 위해 플래그를 추가하십시오.

var top = true; 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     $('.dock').fadeOut(); 
     $('#sticky-nav').css('padding-top', '30px'); 
     $('.feed').css('margin-top', '30px'); 
     top = false; 
    } else if ($(this).scrollTop() < 200) { 
     $('.dock').fadeIn(); 
     $('#sticky-nav').css('padding-top', '125px'); 
     $('.feed').css('margin-top', '125px'); 
     top = true; 
    } 
}); 

//Push down the filter and feed 
$('.hover-dock').hover(function() { 
    if (top == false) { 
     $('.dock').fadeIn(100); 
     $('#sticky-nav').css('padding-top', '125px'); 
     $('.feed').css('margin-top', '125px'); 
    } 
}, function() { 
    if (top == false) { 
     $('.dock').fadeOut(150); 
     $('#sticky-nav').css('padding-top', '30px'); 
     $('.feed').css('margin-top', '30px'); 
    } 
}); 

FIDDLE