Как скрыть элементы в jQuery до тех пор, пока пользователь не начнет прокрутку

Question

Мне нужно скрыть два div #top и #header-space, пока пользователь не начнет прокручивать страницу. Я уже пытался сделать это, но этот код по-прежнему отображает два div после загрузки страницы. Я делаю это в WordPress, используя jQuery, и хочу сделать это только для домашней страницы. Не могу обойти эту точку.

Вот код, который я пробовал:

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        var y = $(window).scrollTop(0);
        var width = $(window).innerWidth();

        if(window.location.pathname == '/'){
            if ( window.innerWidth > 1000) {
                if( y > 0 ){
                    $('#top').fadeIn();
                    $('#header-space').fadeIn();
                } else {
                    $('#top').fadeOut();
                    $('#header-space').fadeOut();
                }
            }
        } else {
        }   
    });
});

Answer 1

попробуйте этот код:

var position = $(window).scrollTop(); 
// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        // Code to for Scrolling Down
    } else {
         // Code to for Scrolling Up
    }
    position = scroll;
});

Вы можете удалить оператор 'IF' и запустить код в любом случае. или ставьте код только на первое условие, которое срабатывает при прокрутке пользователя вниз.