TypechoJoeTheme
Joe主题实现文章页头部滚动后隐藏时显示文章标题
统计
登录
用户名
密码

Joe主题实现文章页头部滚动后隐藏时显示文章标题

2021-01-01
/
0 评论
/
79 阅读
/
正在检测是否收录...
01/01

这个功能是从一个Joe魔改主题提取出来的,在此表示感谢。

1、修改 header.php

首先,在文件中找到 <!-- 网站 logo --> 这个注释,在此前面添加如下代码:

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

然后,在文件中找到 <!-- 搜索 --> 这个注释,在此前面添加 </div> 与前面的配对。

2、修改 joe.config.js

首先,在 init() 中添加函数初始化

this.init_head_title()

然后,在 init_lazy_load() 后添加如下代码

init_head_title() {
        let canSlideDown = true
        let canSlideUp = true
        let showNav = function(){
            $("#post_top_title").addClass("post_no")
            $(".row.above .above-nav").removeClass("post_no")
            $(".row.below").slideDown("fast",function (){
                canSlideDown = true
            })
        }
        let hideNav = function(){
            $("#post_top_title").removeClass("post_no");
            $(".row.above .above-nav").addClass("post_no")
            $(".row.below").slideUp("normal",function () {
                canSlideUp = true
            })
        }

        $(document).ready(function() {
            let lastScrollPos = 0
            if(screen.width < 768) {
                $(window).scroll(function() {
                    let scrollPos = $(window).scrollTop(); //得到滚动的距离
                    if (scrollPos > 395 && scrollPos < 505) return // 防止nav出现触发再次scroll
                    if (scrollPos >= 450) { //比较判断是否fixed
                        if (lastScrollPos > scrollPos && canSlideUp){
                            canSlideDown = false
                            $(".row.above").slideDown("fast",function (){
                                setTimeout(function () {
                                    canSlideDown = true
                                },300)
                            })
                        }
                        else{
                            if (canSlideDown){
                                canSlideUp = false
                                $(".row.above").slideUp("normal",function () {
                                    setTimeout(function () {
                                        canSlideUp = true
                                    },300)
                                })
                            }
                        }
                    } else {
                        $(".row.above").slideDown("fast",function (){
                            setTimeout(function () {
                                canSlideDown = true
                            },300)
                        })
                    }
                    lastScrollPos = scrollPos
                })
              }else {
                  let navOffw = $("header.j-header").width()
                  if ($("#post_top_title").length > 0 && navOffw > 750) {
                      $(window).scroll(function() {
                          let scrollPos = $(window).scrollTop(); //得到滚动的距离
                          if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll
                          if (scrollPos >= 450) { //比较判断是否fixed
                              if (lastScrollPos > scrollPos && canSlideUp){ //向上滚动举例超过100
                                  canSlideDown = false
                                  showNav()
                              }
                              else{
                                  if (canSlideDown){
                                      canSlideUp = false
                                      hideNav()
                                  }
                              }
                          } else {
                              showNav()
                          }
                          lastScrollPos = scrollPos
                      })
                  }
              }
          })
      }
  }

3、修改 joe.min.css

在文件中添加如下

.j-header-default .above .container .above-nav{display:flex;animation:hideIndex 0.6s;-moz-animation:hideIndex 0.6s;-webkit-animation:hideIndex 0.6s;-o-animation:hideIndex 0.6s}.j-header-default .above .container .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}
朗读
赞 · 0
版权属于:

小王先森

本文链接:

https://xwsir.cn/2682.html(转载时请注明本文出处及文章链接)

评论 (0)