jQuery .offset 视口(viewport)顶部问题

Question

我一直无法弄清楚我在这里做错了什么。基本上，如果用户位于页面顶部，下拉菜单可以正常工作，但是当用户向下滚动时，单击菜单将不会缩回。

我知道有一个使用 .position 而不是 .offset 的解决方法，但无论我读了多少文档，我都无法弄清楚如何将 $(window) 添加到 .offset

这是我到目前为止所得到的:

$(document).ready(function() {
$('.title-bar, #menu-wrap').click(function() {
if($('#menu-wrap').offset().top === 0){
    $('#menu-wrap').stop().animate({top:'-300px'}, 1000);
} else {
    $('#menu-wrap').stop().animate({top:'0px'}, 1000);
}
});
});​

这里是 fiddle

我确信解决方案很简单，但我很难开始将 Jquery 脚本串在一起 - 这比我迄今为止学到的任何其他东西都要花更长的时间，正如你可能想象的那样(或不!)真的很令人沮丧。

Answer 1

这是因为滚动发生时 offset() 位置会发生变化。试试这个代码，它会起作用的

$(document).ready(function() {
$('.title-bar, #menu-wrap').click(function() {

  if($('#menu-wrap').offset().top - $(window).scrollTop() === 0){
    $('#menu-wrap').stop().animate({top:'-300px'}, 1000);
  } else {
    $('#menu-wrap').stop().animate({top:'0px'}, 1000);
    $('#menu-wrap').offset().top = 0;
  } 

});});​​