优化Blocksy主题页眉导航 添加滚动隐藏/显示效果

继续分享wordpress外贸建站教程。之前遇到的那个特别麻烦的wordpress项目中，客户要求页眉导航的一部分实现滚动隐藏/显示效果。即页眉有两行，第一行显示LOGO，第二行显示菜单，第一行一直固定显示，当页面向下滚动时隐藏第2行菜单，但只要向上滚动，第二行立即显示。这个网站使用的是Blocksy主题，Blocksy主题页眉导航并不能完全实现这种效果。后来我也是折腾了好一会才搞定。

接下来分享实现步骤。

步骤一：设置Blocksy主题页眉固定

首选进入Blocksy主题的页眉设置，开启固定功能，选顶部和主行固定。

步骤二：添加JS

直接给出代码如下，大家可以直接复制使用。

let lastScrollTop = 0;
const header = document.querySelector('[data-header*="type-1"]');

window.addEventListener('scroll', function() {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 向下滚动 = 隐藏
  if (currentScrollTop > lastScrollTop) {
    header.classList.add('scroll-down');
  }
  // 向上滚动 = 显示（移除CSS禁用效果）
  else {
    header.classList.remove('scroll-down');
  }

  lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
});

添加可以添加到wp code等插件中。

如上图所示，在WP code插件中，添加代码，Code Type选JavaScript。然后把上面的代码粘贴进去并激活。

步骤三：添加CSS动画

这里同样直接给出代码，可以直接复制粘贴，过渡时间可以按需修改。

@media (min-width: 1000px) {
  /* 默认状态：显示 + 开启过渡动画 */
  [data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    /* 过渡时间 0.4 秒，可自己改快慢 */
    transition: opacity 0.4s ease, visibility 0.8s ease;
  }

  /* 向下滚动：慢慢隐藏（淡出） */
  [data-header*="type-1"].scroll-down .ct-header [data-sticky*="yes"] [data-row*="middle"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

把上面的代码粘贴到主题自定义设置的额外CSS中，如上图所示。然后发布即可。

总结

这个功能其实没什么实际意义，个人感觉只是多了几行垃圾代码😅，如非必要，大可不必这样折腾！一般用主题提供的预设就足够了，没必要强求。多把精力放到网站内容上吧。