如何让jQuery在鼠标滚动时隐藏div？

Question

I have some jQuery code that loads a div with few elements on toggle but I notice that when I scroll the div stays loaded so how do I hide the div on scroll is my question.

This is a part of the code - the way it looks normally is like:

how it looks normally when loaded

The problem:

notice that it moves down when scrolled and I want to prevent that

$(document).ready(function () {
    // $(".navbar").hide(); //well this works the same for loading pages
    $("#loadindex").load("codeParts/headerDreiHome.html") // loads the second main header part for the navbar
    $("#loadindex").hide();
    $("#loadindex1").load("codeParts/headerDreiHtmlCss.html") // loads the second main header part for the navbar
    $("#loadindex1").hide();
    $("#loadindex2").load("codeParts/headerDreiJava.html") // loads the second main header part for the navbar
    $("#loadindex2").hide();
    $("#loadindex3").load("codeParts/headerDreiJavaScript.html") // loads the second main header part for the navbar
    $("#loadindex3").hide();
    $("#loadindex4").load("codeParts/headerDreiAboutMe.html") // loads the second main header part for the navbar
    $("#loadindex4").hide();
    $("#loadindex5").load("codeParts/headerDreiContactMe.html") // loads the second main header part for the navbar
    $("#loadindex5").hide();
    $("#toggleHome").click(function () {
        $("#loadindex1").hide();
        $("#loadindex2").hide();
        $("#loadindex3").hide();
        $("#loadindex4").hide();
        $("#loadindex5").hide();
        $("#loadindex").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex").hide();
            }, 8000);
        });
    });
    $("#toggleHtmlCss").click(function () {
        $("#loadindex").hide();
        $("#loadindex2").hide();
        $("#loadindex3").hide();
        $("#loadindex4").hide();
        $("#loadindex5").hide();
        $("#loadindex1").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex1").hide();
            }, 8000);
        });
    });
    $("#toggleJava").click(function () {
        $("#loadindex1").hide();
        $("#loadindex").hide();
        $("#loadindex3").hide();
        $("#loadindex4").hide();
        $("#loadindex5").hide();
        $("#loadindex2").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex2").hide();
            }, 8000);
        });
    });
    $("#toggleJavaScript").click(function () {
        $("#loadindex1").hide();
        $("#loadindex2").hide();
        $("#loadindex").hide();
        $("#loadindex4").hide();
        $("#loadindex5").hide();
        $("#loadindex3").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex3").hide();
            }, 8000);
        });
    });
    $("#toggleAboutMe").click(function () {
        $("#loadindex1").hide();
        $("#loadindex2").hide();
        $("#loadindex").hide();
        $("#loadindex3").hide();
        $("#loadindex5").hide();
        $("#loadindex4").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex4").hide();
            }, 8000);
        });
    });
    $("#toggleContactMe").click(function () {
        $("#loadindex1").hide();
        $("#loadindex2").hide();
        $("#loadindex3").hide();
        $("#loadindex4").hide();
        $("#loadindex").hide();
        $("#loadindex5").toggle("slow", function () {
            setTimeout(function () {
                $("#loadindex5").hide();
            }, 8000);
        });
    });
});

Answer 1

 $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.divTo').fadeOut(); } else { $('.divTo').fadeIn(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="divTo"> Content </div> </div>