As mentioned in Andrew's answer u need to make changes in your css
css
#hideshow {
background-color: #F0F8FF;
background-image: url("https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg");
background-size: cover;
border-radius: 100px 0 10px 100px;
box-shadow: 2px 2px 2px #888888;
cursor: pointer;
height: 40px;
left: -20px;
opacity: 0.7;
padding: 2px 4px;
position: absolute;
transition: opacity 0.5s ease 0s;
width: 10px;
}
#pnlThematic {
border: medium dotted;
height: 100%;
left: 0;
position: relative;
top: 0;
width: 100%;
}
#pnlThematicParent {
height: 300px;
position: fixed;
right: 0;
width: 150px;
}
and a little change in ur script too
script
var wWidth = $(document).width();
$('#pnlThematic').css({marginLeft: -(parseFloat($('#pnlThematic').css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()});
var elementWidth = $("#hideshow").width();
$("a").on("click", function (ev) {
var isVisible = $(ev.target).parent().is(":visible");
$(ev.target).parent().animate({
marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
});
});
working fiddle
Note: Instead of making handle fixed make parent div fixed