How to display an element on scroll and hide it for N pixels until the end of the page appears?

Question

JavaScript

At the moment, the fixed element is displayed on scroll with this code:

$(document).ready(function() {
  $(window).scroll(function() {
    if ( $(this).scrollTop() > 600 ) {
      $('#widget').fadeIn('fast');
    } else {
      $('#widget').fadeOut('fast');
    }
  });
});

I need the element to hide N pixels until the end of the page, or until the footer appears in the viewport.
And if after hiding (at the bottom of the page) you start scrolling up, the element should appear again.
Tell me, please, how to solve the problem?

Added demo

Answer 1

600 is what?
That's right, copied and not understood code. turns into... turns into... an elegant condition

var pixelN = 100;
if ( $(this).scrollTop() > $(this).height() - $('footer').height() - pixelN){...}

var pixelN = 100; -
Meaning

N pixels before the end of the page