Get percentage of visible area on scroll

Question

In the following snippet, if you run it with console open, you should see that as you scroll, once the blue div is in view, the console logs "start", and once it's scrolled out of view, it logs "end".

What I'm trying to achieve is to return the amount that this is visible on screen, in percentage, based on scroll. So that when it's not yet scrolled to, it returns 0%, and when it's just on screen it's 1%, and when it's scrolled past it returns 100%. I can work out the percentage of the document scrolled, I just don't know how to do it with a specific area of the page. Eventually fading that box out as it's scrolled past, is kind of the effect I'm trying to do, but not starting the fade until it appears on screen.

How might I accomplish something like this? I have strong a feeling I'm overcomplicating it.

Codepen with console open: http://codepen.io/jhealey5/pen/VaMQEe?editors=1111

(function($){
  var $box = $('div');
  
  $(window).on('scroll', function(){
    var $win = $(window),
		rect = $box.get(0).getBoundingClientRect(),
        top = rect.top,
        bottom = rect.bottom;
    
    if (top <= $win.height()) {
		console.log('start');
	}
	  
	if (bottom < 0) {
		console.log('end');
	}
  });
  
})(jQuery);

p {
  font-size: 18px;
  margin-bottom: 40px;
}

div {
  height: 200px;
  background: #ace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nibh augue, fermentum a diam sit amet, ultrices ullamcorper orci. Pellentesque non pretium urna. Sed eu ex id lorem congue tristique euismod vel tortor. Vestibulum in ante diam. Cras consequat dui ac magna sodales tincidunt. Sed justo quam, rutrum et elit vel, finibus lobortis dolor. Aenean tempus lacus a quam sagittis, eu dictum massa dapibus. Nulla cursus molestie mi, et semper ligula suscipit ac. Aliquam et finibus eros.</p>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

<p>Aenean sapien lectus, elementum ac quam quis, condimentum scelerisque dui. Donec ultricies, dolor eu laoreet iaculis, sapien ipsum ornare mauris, a pharetra diam diam in dui. Ut convallis placerat dolor non suscipit. Vivamus mollis tempor massa, quis maximus nibh ultrices vitae. Ut eleifend, orci et accumsan placerat, ligula sapien vulputate ipsum, a consequat lectus libero mollis lectus. Phasellus eget diam quam. Duis tincidunt, nisi ut condimentum lobortis, libero urna viverra justo, quis dignissim lorem dui eu erat. Nunc consectetur mi vitae tincidunt gravida. Nunc lacinia arcu non dolor fringilla, eget congue dui faucibus. Nullam vitae enim convallis, dictum quam cursus, semper tortor. Morbi mauris purus, placerat maximus mauris sit amet, congue sodales elit.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nec dictum nisi, vel auctor ligula. Vivamus vulputate pulvinar elementum. Donec arcu eros, efficitur a lectus ut, tempus iaculis nibh. Donec ac ex justo. Praesent ut lacinia nisi. Sed massa velit, fermentum nec sollicitudin quis, egestas vitae nisi. Aenean semper leo dui, sed vulputate mi elementum ut. Nulla in urna ultrices, vulputate odio et, bibendum metus. Pellentesque commodo libero id faucibus vulputate. Nullam bibendum suscipit neque, nec luctus magna porttitor et. Integer vel nulla id arcu egestas finibus quis quis ante. Nulla at laoreet lorem. Pellentesque et purus enim.</p>

<p>Morbi convallis dictum lectus, eget volutpat risus fringilla id. Sed tincidunt nunc orci, sed cursus nisi tristique et. Donec suscipit laoreet tempus. Nam vehicula eu elit sit amet blandit. Quisque lacinia tempor mauris et sodales. Sed tempor, purus eu bibendum egestas, neque orci dignissim nulla, eget hendrerit est turpis vel elit. Aenean a vulputate ligula. Mauris tincidunt metus tellus, eget malesuada est feugiat eu. In interdum, ex nec porta cursus, enim sem suscipit magna, sit amet rutrum lacus nunc non ex. Maecenas auctor dolor condimentum lacinia bibendum. Vestibulum nisl magna, dictum id leo in, cursus gravida erat.</p>

<div></div>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

Answer 1

Try this:

if (top <= $win.height()) {
    console.log(
      Math.min(100,                  // max 100%
        Math.round(                  // round to integer
          ($win.height() - top)      // distance from the top of window
                                     // to the top of the box
            / rect.height            // divided into the height of the box
          * 100                      // multiply by 100 to get percents
        )
      )
    + "%");                          // add a percent sign
}

See demo on Code Pen.

Answer 2

This should work

(function($) {
var $box = $('div');

$(window).on('scroll', function() {
    var $win = $(window),
        rect = $box.get(0).getBoundingClientRect(),
        top = $box.position().top,
        scrollBottom = ($win.scrollTop() + $(window).height()),
        percentValue = Math.max(Math.min(Math.round((scrollBottom - top) / rect.height * 100), 100), 0),
        fadeValue = 1 - (percentValue / 100);
    $box.fadeTo(0, fadeValue);
});
})(jQuery);