jQuery .offset 视口顶部问题

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

});});​​