在滚动条上显示徽标 header

Question

我正在尝试创建一个功能，当用户开始滚动页面时显示站点的徽标，然后当用户滚动回顶部时再次隐藏它。为什么我的代码不起作用？

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

你有一个 id

<div id="navi-logo">

并且在你的 js 中你尝试 select 作为 class

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

也许使用 id-select 或：

就足够了

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

Answer 2

当您向上或向下滚动页面时，您的功能永远不会转到其他地方。也许您需要一个当前滚动位置，如果您的滚动位置低于当前位置，则转到其他位置。但是当你的函数启动时，你的当前位置会一直刷新。你需要解决这个问题。

在滚动条上显示徽标 header

Show logo on scroll sticky header

jquery

scroll

hide

show