Only Show Div When In The Middle Of The Page

I'm hoping to fade in a div when the page has been scrolled away from the top of the page, however I want this div to be hidden again when approaching the bottom of the page. To be

Solution 1:

how's this:

$(function () {
    var $window = $(window);

    $window.scroll(function () {
      var scrollTop = $(this).scrollTop();

        // only fadeIn between 200 from top and 200 from bottomif (scrollTop  > 200 && scrollTop <  $(document).height() - $window.height() - 200) {
            $('#myDiv').fadeIn(500);
        } else {
            $('#myDiv').fadeOut(500);
        }
    });
});

Example fiddle