jQuery right panel open/close on scroll and click

I have been working on this script, please be nice to the newbie, I have got it kind of functioning how I want, open/close on scroll and by button click, you can see the Fiddle

$(window).scroll(function() {

if ($(this).scrollTop() > 0) {
$('.slide').hide("slide", {
  direction: "right"
}, 500);
} else {
$('.slide').show("slide", {
  direction: "right"
}, 500);
}

});

$(".btn").click(function() {

$('.slide').hide("slide", {
direction: "right"
}, 500);
retu false;

});

The main things I want to achieve is getting the black button to slide right/left with the panel rather than jumping when it closes, I couldn't find anywhere to make the .hide slide function to stop say 50px from the right so I could make the .container slide and stop 50px still showing the button.

I also managed to get the black button opening the slide panel on request however I couldn't get it to close.