document and window not defined on scrolling

problem changing a css class on scroll

I am trying to do a the fixed top div change color when i scroll it works but when i aam on the middle of the page and refresh the browser very fast sometimes does not work.

Validating the code here https://validatejavascript.com/ it show me two errors: 'document' and 'window' are not defined

import $ from 'jquery';
import Masonry from 'masonry-layout';
import jQueryBridget from 'jquery-bridget';
import imagesLoaded from 'imagesloaded';

jQueryBridget('masonry', Masonry, $);
jQueryBridget('imagesLoaded', imagesLoaded, $);


$(document).ready(function() {
const $window = $(window);


    $window.scroll(
      function() {

        if ($(this).scrollTop() > 50) {
            $('.top-socials').addClass('changeColor');
        }

        if ($(this).scrollTop() < 50) {
            $('.top-socials').removeClass('changeColor');
        }

    });


    // toggle open menu
    $('.menu-icon-toggle').click(() => { // Change # instead of .
        $('.nav-list').toggle('slow');
    });


    // Masonry 

    const $container = $('.grid');

    $container.imagesLoaded(() => {
        $container.masonry({
            itemSelector: '.grid-item'
        });
    });


});