浏览文章时隐藏 header 并显示标题的教程

我们要在header.php中显示我们的标题，将header文件中网站logo和链接的代码块换成下面的：
结构如下：

|<!– post title –>
这里是显示标题的
|<div class="above-nav">
|——|<!– 网站 logo –>
|——|<!– 链接 –>
|</div>

<!-- post title -->
                <?php if ($this->is('post')): ?>
                    <div class="top-bar-title post_no" id="post_top_title"><?php $this->title(); ?></div>
                <?php endif; ?>
                <div class="above-nav">
                    <!-- 网站 logo -->
                    <h1 class="logo j-hover-music" title="<?php $this->options->title(); ?>">
                        <?php $this->options->title(); ?>
                        <a href="<?php $this->options->siteUrl(); ?>">
                            <?php if ($this->options->JLogo) : ?>
                                <img src="<?php $this->options->JLogo() ?>" />
                            <?php else : ?>
                                <img src="png图片地址" />
                            <?php endif; ?>
                        </a>
                    </h1>
                    <!-- 链接 -->
                    <nav class="nav j-nav">
                        <a class="link <?php if ($this->is('index')) : ?>active<?php endif; ?>" href="<?php $this->options->siteUrl(); ?>">首页</a>
                        <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>

                        <!-- 循环4个之前的 -->
                        <?php $i = 0; ?>
                        <?php while ($pages->next()) : ?>
                            <?php $i++; ?>
                            <?php if ($i <= $this->options->JNavMaxNum) : ?>
                                <a class="link <?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
                            <?php endif; ?>
                        <?php endwhile; ?>

                        <!-- 超过4个则显示更多 -->
                        <?php if ($i > $this->options->JNavMaxNum) : ?>
                            <div class="link drops">
                                <div class="j-drop">
                                    <span>更多</span>
                                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns=svg地址">
                                        <path d="M825.728 390.144L521.056 702.336 217.152 390.144c-16.576-16.576-43.744-16.576-60.32 0s-16.576 43.744 0 60.32L483.36 778.496c10.56 9.056 23.392 19.616 36.96 17.344 13.568 3.008 27.904-6.784 38.464-17.344L886.08 450.464a42.816 42.816 0 0 0 0-60.32 42.784 42.784 0 0 0-60.352 0z"></path>
                                    </svg>
                                </div>
                                <nav class="j-dropdown">
                                    <?php $current = 0 ?>
                                    <?php while ($pages->next()) : ?>
                                        <?php $current++; ?>
                                        <?php if ($current > $this->options->JNavMaxNum) : ?>
                                            <a class="<?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
                                        <?php endif; ?>
                                    <?php endwhile; ?>
                                </nav>
                            </div>
                        <?php endif; ?>
                    </nav>
                </div>

1、添加js

/*顶部自动隐藏*/
$(document).ready(function() {
if(screen.width < 768) return
    let header = $("header.j-header")
    let above_nav = $(".row.above .above-nav")
    let below = $(".row.below")
    let post_title = $("#post_top_title")
    let navOffw = header.width();
    if (post_title.length > 0 && navOffw > 750) {
        $(window).scroll(function() {
            let scrollPos = $(window).scrollTop(); //得到滚动的距离
            if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll
            if (scrollPos >= 450) { //比较判断是否fixed
                below.slideUp()
                post_title.removeClass("post_no");
                above_nav.addClass("post_no")
            } else {
                below.slideDown()
                post_title.addClass("post_no");
                above_nav.removeClass("post_no")
            }
        })
    }
})

2、添加样式

.above-nav {
    display: flex;
    width: 100%;
}
.top-bar-title {
    font-size: 16px;
    line-height: 50px;
    font-weight: 600;
    animation: hideIndex 0.6s;
    -moz-animation: hideIndex 0.6s;
    -webkit-animation: hideIndex 0.6s;
    -o-animation: hideIndex 0.6s;
}
.post_no {
    display: none !important;
}

👋 感谢您的观看！