Question

我有一个div（.dock）固定在页面顶部。当我向下滚动消失并在滚动到顶部时重新出现。这很好。要在以后的页面上将停靠栏放入视图，用户可以将鼠标悬停在菜单栏（.hover-dock）上。此悬停功能应仅在＆gt;之后发生。 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

Jquery Scroll和Hover Glitch

1 个答案: