Jquery Scroll et Hover Glitch

Question

J'ai un div (.dock) fixé en haut de la page. Lorsque je défile vers le bas disparaît et réapparaît lorsque défile vers le haut. Cela fonctionne bien. Pour afficher le dock plus tard sur la page, l'utilisateur peut survoler la barre de menu (.hover-dock). Cette fonction de survol ne devrait avoir lieu qu'après le défilement> 200.

Cela fonctionne au départ mais lorsque vous faites défiler vers le haut, la fonction de survol devient active, ce qui crée une confusion lorsque le dock doit rester ... ancré. Qu'est-ce que je fais mal ici? Voici mon code ...

$(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

Si j'étais vous, je l'aurais fait comme ça. Ajout de gestionnaire de survol en dehors de la fonction scroll(). Et ajouter un drapeau afin de savoir si scrollTop() est supérieur ou inférieur à 200px en vol stationnaire.

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