登录
Joe主题实现文章页头部滚动后隐藏时显示文章标题
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}