在滚动粘性标题上显示徽标

时间:2021-07-11 12:03:16

标签: jquery scroll hide show

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

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

2 个答案:

答案 0 :(得分:0)

你有身份证

<div id="navi-logo">

并在您的 js 中尝试选择为类

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

也许使用 id-selector 就足够了:

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

答案 1 :(得分:0)

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