Jquery Scroll and Hover Glitch

我有一個div（.dock）固定在頁面的頂部。當我向下滾動消失並在滾動到頂部時再次出現。這工作正常。爲了在以後的頁面中查看碼頭，用戶可以將鼠標懸停在菜單欄上（.hover-dock）。這個懸停功能只能在> 200滾動之後發生。Jquery Scroll and Hover Glitch

這起作用最初，但當滾動回頂部時，懸停功能變爲活動狀態，造成混亂，當碼頭應該...保持停靠狀態。我在這裏做錯了什麼？這是我的代碼...

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

來源

2013-10-15 Dan Lee

如果我是你，我會這樣做。在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

來源

2013-10-15 15:00:22 EdenSource

Jquery Scroll and Hover Glitch

回答

相關問題