Joe 主题 6.xx 增加顶部下拉隐藏，并显示文章标题

效果和本博客在查看文章时的效果一致，当下滑的时候，顶部会自动收起并显示文章的标题。

原理没啥好讲的，就是监听下滚动时间，判断下滚动距离。

教程

添加到自定义css：

@keyframes hideIndex {
  0% {
    opacity: 0;
    transform: translate(0, 30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.post_no {
  display: none !important;
}

body #Joe {
  padding-top: 105px !important;
}
body #Joe > header {
  position: fixed;
  width: 100%;
}
body #Joe #post_top_title {
  font-size: 16px;
  line-height: 50px;
  font-weight: 600;
  width: 100%;
  animation: hideIndex 0.6s;
  -moz-animation: hideIndex 0.6s;
  -webkit-animation: hideIndex 0.6s;
  -o-animation: hideIndex 0.6s;
}
body #Joe #post_top_title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--main);
}

@media (max-width: 768px) {
  body #Joe {
    padding-top: 55px !important;
  }
}

自定义js：

$(document).ready(function(){
if (!document.querySelector("#post_top_title span").innerHTML){
            return
        }
        let header = document.querySelector("header.joe_header")
        let row_above = $(".joe_header__above")
        let above_nav = $(".joe_header__above .joe_container:first-child")
        let below = $(".joe_header__below")
        let post_title = $("#post_top_title")
        let canSlideDown = true
        let canSlideUp = true
        let caluSideBar = function () {
            // 计算侧边栏最后一个元素的高度
            let ele = $('.joe_aside__item:last-child')
            ele.css('transition','top 100ms');
            ele.css('top', $('.joe_header').height() + 15)
        }
        let showNav = function(){
            post_title.addClass("post_no")
            above_nav.removeClass("post_no")
            below.slideDown("fast",function (){
                canSlideDown = true
                caluSideBar()
            })
        }
        let hideNav = function(){
            post_title.removeClass("post_no");
            above_nav.addClass("post_no")
            below.slideUp("normal",function () {
                canSlideUp = true
                caluSideBar()
            })
        }

        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 (){
                            canSlideDown = true
                        })
                    }
                    else{
                        if (canSlideDown){
                            canSlideUp = false
                            row_above.slideUp("normal",function () {
                                canSlideUp = true
                            })
                        }
                    }
                } else {
                    row_above.slideDown("fast",function (){
                        canSlideDown = true
                    })
                }
                lastScrollPos = scrollPos
            })
        }else {
            let navOffw = header.offsetWidth
            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
                        if (lastScrollPos > scrollPos && canSlideUp){ //向上滚动举例超过100
                            canSlideDown = false
                            showNav()
                        }
                        else{
                            if (canSlideDown){
                                canSlideUp = false
                                hideNav()
                            }
                        }
                    } else {
                        showNav()
                    }
                    lastScrollPos = scrollPos
                })

            }
        }

})

添加 html：

在 Joe/public/header.php 文件顶部找到

<header class="joe_header">
----<div class="joe_header__above">
--------<div class="joe_container">
------------xxxxx很多代码
--------</div>
----</div> // 找到这一个闭合的标签

说白了就是在 <div class="joe_header__above"> 这个标签对应的闭合标签</div>的前面插入：

<header class="joe_header">
----<div class="joe_header__above">
--------<div class="joe_container">
------------xxxxx很多代码
--------</div>
--------<div class="joe_container post_no" id="post_top_title"><span><?php if ($this->is('post')): ?><span><?php $this->title(); ?></span><?php endif; ?></div>
----</div> // 找到这一个闭合的标签，在前面插入

刷新一下大功告成。