浏览文章时隐藏 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="https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/logo.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="http://www.w3.org/2000/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>

添加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")
                    }
                })
            }
        })

添加样式

        .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;
        }
© 版权声明
THE END
喜欢就支持以下吧
点赞1赞赏 分享
吐槽 抢沙发

请登录后发表评论