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() 是否超过或低于 200 像素。

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