Как скрыть все элементы с помощью jquery, когда страница готова, кроме тех, которые находятся в видимом окне просмотра (экране), и показать их обратно при прокрутке

я пытаюсь скрыть все элементы, используя jquery, когда страница загружена/готова рядом с теми, которые находятся в видимом окне просмотра (экране).

затем, когда пользователь начнет прокручивать вниз, и элемент находится в видимом окне просмотра (экран пользователя). элементы появятся с эффектом затухания.

поэтому я пытаюсь использовать некоторые комбинации кода, но ни один из них не работает на 100%. нужна помощь, чтобы получить эту работу без ошибок.

вот первый код, который я нашел в Интернете. это похоже на работу на главной странице (на первой странице), но когда я перехожу на страницу iner, она не работает. и этот код делает некоторые ошибки (медленный сайт).

второй код работает на конкретных элементах. если я изменю все конкретные элементы и поставлю только "тело", это создаст беспорядок на веб-сайте.

Вторая проблема - прокрутка. если какой-либо div или раздел имеют длинный контент, он изменит непрозрачность до 1 в конце этого div, но это неправильно! ему нужно изменить непрозрачность, когда верхняя часть div видна в окне просмотра (экран пользователя).

вот первый код

$(document).ready(function() {

    /* Hide all elements outside the visible window */
    $('body *').each( function(){

        var top_of_object = $(this).position().top;
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window < top_of_object  ){

            $(this).addClass('hideme').css({'opacity':'0'});

        }

    });

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of the desired elements */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();


                if( bottom_of_window > ( bottom_of_object + 20 )  ){

                    $(this).removeClass('hideme').animate({'opacity':'1'},500);

                }

        }); 

    });

});

это второй код:

$(document).ready(function(){
tiles = $("#sidebar1 .widget , article section").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});