Hide at 80% height after show/hide DIV when passed another DIV

Question

I try to hide a DIV at 80% height that shows/hide when another DIV passed before.

This is the code (Source) to show/hide after passed the DIV:

<script type="text/javascript">
$(function(){
        $(document).scroll(function(){
                    var vis = ($(document).scrollTop() > ($('.passedMe').offset().top+$('.passedMe').height()));
                            if (vis) $('.showHide').fadeIn(); else $('.showHide').fadeOut();
                                });
        });
</script>

The DIV should hide at 80% height of the page.

Like this (Source):

<script>
var y = $(this).scrollTop();

if (y < ($(document).height() * 0.8)) {
  $('.showHide').fadeIn();
} else {
  $('.showHide').fadeOut();
}
</script>

Answer 1

I get it!

Here is the working code:

<script type="text/javascript">
$(function(){
    $(document).scroll(function(){
        var y = $(this).scrollTop();
        var vis = $(document).scrollTop();
        if (vis > ($('.passedMe').offset().top+$('.passedMe').height()) && y < ($(document).height() * 0.8)) {
          $('.showHide').fadeIn();
        } else { 
          $('.showHide').fadeOut();
        }
        });
});
</script>