如何在Oxygen Builder中设置粘性标题

　　这是一种简单但非常花哨的方法，可以防止标题占用可用于显示内容的空间。此代码段包含一小段 Javascript 和几行 CSS，将获得在WordPress中实现粘性标题，如果您查看上面示例的源代码，它可能看起来需要处理很多，所以分解一下。

　　此代码段允许您（几乎）在页面上设置任何标题，当您向下滚动时隐藏，但当您向上滚动时再次弹出，本文晓得博客为你介绍如何在Oxygen Builder中设置粘性标题。

　　推荐：Oxygen Builder页面构建器设置背景

添加HTML元素

　　添加HTML元素这是最简单的部分；向要粘性的元素添加一个类！没有复杂的 HTML 结构，也不需要重新设计您的网站来让一个简单的脚本能够完成它的工作。只需将 .jd-sticky 添加到您想要具有粘性的任何元素，然后继续接下来的步骤即可。

<!-- <header> element -->
<header class="jd-sticky">
</header>

<!-- <div> element -->
<div class="jd-sticky">
</div>

<!-- <nav> element -->
<nav class="jd-sticky">
</nav>

添加CSS元素

　　第二步是向要设置为粘性的元素添加一个类，首先我们在正文中添加一个 padding top，这样总会有一些空间来显示标题，使用 position:fixed 将页眉固定在页面顶部，这将整个元素置于其余内容之上。当然，需要根据标头元素的大小更改填充。

body {
    padding-top: 70px;
}
@media (max-width: 768px) {
    body {
        padding-top: 140px;
    }
}
.jd-sticky {
    position: fixed;
    top: 0;
    transition: top 700ms linear;
}

　　推荐：如何从WordPress中删除Additional CSS额外CSS

添加Javascript代码

　　最后一步是添加 javascript 来处理上下滚动时标题的显示和隐藏。Javascript 非常简单但非常有效，它采用需要受影响的元素，在本例中为 .jd-sticky，并将根据滚动行为更改顶部位置。

const headerElem = document.querySelector('.jd-sticky');

const scrollOffset = 200;

let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
    if (window.pageYOffset > scrollOffset) {
        let currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
            headerElem.style.top = '0';
        } else {       
            headerElem.style.top = '-100%';
        }
        prevScrollpos = currentScrollPos; 
    }
});

　　推荐：wpDataTables插件下载WordPress表格图表管理器插件