Show logo on scroll sticky header

Question

I'm trying to create a function that show a site's logo when the user starts scrolling the page and then hides it again when the user scrolls back to top. Why doesn't my code work?

jQuery(function($){    
        $(window).scroll(function(){ 
            if($(window).scrollTop() > 0) {
                $('.navi-logo').show();
            } else {
                $('.navi-logo').hide();
            }
        }); 
    });

    <div id="header-main" class="header-bottom">
        <div class="header-bottom-inner" id="main-navigation">
                <div class="container">
                <div class="row">
                    <div class="col-md-0">
                    <div id="navi-logo">
                                <?php get_template_part( 'template-parts/header/header', 'logo' ); ?>
                    </div>
                    </div><!--.col-md-0-->
            </div><!--.row-->
            </div><!-- .container -->
            
                <div class="container">
                <div class="row">

                    <div class="col-md-00">
                        <div class="site-navigation pull-right">
                            
                            <?php get_template_part( 'template-parts/header/header', 'menu' ); ?>
                            
                        </div><!-- .site-navigation -->
                    </div><!--.col-md-00-->
                </div><!--.row-->
            </div><!-- .container -->
        </div><!--.header-bottom-inner-->
    </div><!--.header-bottom-->

Answer 1

you are having an id

<div id="navi-logo">

and in your js u try to select as class

 $('.navi-logo').show();

maybe its enough to use id-selector:

 $('#navi-logo').show();