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-->

Check this once...https://stackoverflow.com/questions/31223341/detecting-scroll-direction I think it is already answered. — Amit Verma, Jul 12 '21 at 02:14

score 0 · Accepted Answer · answered Jul 12 '21 at 08:47

0

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();

answered Jul 12 '21 at 08:47

john Smith

17,409
11
76
117

score 0 · Answer 2 · answered Jul 12 '21 at 10:20

When u scroll your page up or down your function never wont go to else. Maybe you need a current scroll position and if your scroll low than current position goes to else. But your current position refresh all time when your function start. You need solve this.

Show logo on scroll sticky header

2 Answers2