jquery else condition inside onscroll function

Hello guys this is my first question and i hope to get help.

I have a problem in animation in onscroll event.

The if condition work very well when i scroll down and div shows without any problem, but when i scroll up the else condition does not work so the div doesn't hide and it still shown

This is the code:

$(function () {

'use strict';

var myDiv1 = $('div'),
    div1Top = (myDiv1.offset().top) / 2;

$(window).on('scroll', function () {

    var docScrollTop = document.documentElement.scrollTop;

    if (docScrollTop >= div1Top) {

        $('div').animate({opacity: '1'}, 800);

    } else {

        $('div').css('opacity', '0');
    }
});

});