var top = 1;

$(document).scroll(function(){
    top = $(this).scrollTop();
});

$('.grid > a img').click(function(){
    var fixed = $('.active-image');
    fixed.css('display', 'flex');
    alert(top);

});

<aside class="left-side">
        <div class="button-side flex">
            <i></i>
            <i></i>
            <i></i>
        </div>
    </aside>

    <section class="grid" id="macy-container">
        <a class="item" href="#"><img src="img/pexels-photo-1804863.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-416202.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-633198.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-1803913.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-633198.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/basketball-court-basketball-ring-court-1607855.jpg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-1415555.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-1774931.jpeg" alt=""></a>
        <a class="item" href="#"><img src="img/pexels-photo-1774931.jpeg" alt=""></a>
    </section>

    <div class="active-image flex">
        <span class="close flex">
            <i></i>
            <i></i>
        </span>
    </div>