Question

I’ve been having problems working out what I’m doing wrong here. Basically, the drop-down menu works fine if the user is at the top of the page, but the minute the user scrolls down the menu will not retract when it’s clicked.

I know there is a workaround using .position instead of .offset, but no matter how much documentation I read, I can’t work out how to add in $(window) to .offset

Here’s what I’ve got so far:

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

And here it is in a fiddle

I’m sure the solution is simple, but I am having a hard time getting into the swing of stringing together Jquery scripts – it’s taking me longer than anything else I’ve learnt so far which is, as you can maybe imagine (or not!) is really frustrating.

Answer 1

This is because offset() position changes when scrolling takes place.
Try this code it will works

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

});});​​