0

我有一个 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');
 } 
});
4

1 回答 1

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

小提琴

于 2013-10-15T15:00:22.250 回答