具有向下滑动效果的置顶标题

Question

我希望当我向上滚动时，我的页眉也会向上，但在滚动位置 150 之后，它会平滑地向下滑动并固定在顶部。我尝试了很多方法，但并没有真正得到正确的结果。请大家看看我的代码吗？

类似http://cssdeck.com/labs/sticky-header-with-slide-down-effect 这个脚本有一些故障。

jQuery(document).ready(function ($) {
    $(window).scroll(function () {

        if ($(window).scrollTop() >= 100) {
            $('.navarea').addClass('fixed-header');

        } else {
            $('.navarea').removeClass('fixed-header');
        }
    });
});

这里是css

.navarea {

    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.5s ease-in-out;
}

.fixed-header {
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    padding-bottom: 0;
    top: 0;
    z-index: 5;
    transition: all 0.5s ease-in-out;
}

直播网址： https://codepen.io/pagol/pen/XovvGJ

Answer 1

这是一个例子

• 创建导航元素的深层克隆（其他解决方案经过大量测试后存在问题）
• 使用 CSS3 transition 进行克隆导航
• 使用去抖动回调机制来利用滚动触发的函数
• 使用position sticky和visibility作为原始元素来提升效果

// https://github.com/micro-js/debounce/blob/master/lib/index.js
function debounce(fn, time) {
  var pending = null
  return function() {
    if (pending) clearTimeout(pending)
    pending = setTimeout(run, time)
    return function() {
      clearTimeout(pending)
      pending = null
    }
  }
  function run() {
    pending = null
    fn()
  }
}

function documentScrollTop() {
  const doc = document.documentElement;
  return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}

const el_nav1 = document.getElementById("nav");
const el_nav2 = el_nav1.cloneNode(true);
el_nav1.parentNode.insertBefore(el_nav2, el_nav1);
el_nav2.style.cssText = `position:fixed; transform:translateY(-100%);`;

function animateNavigation() {
  const canShow = documentScrollTop() >= 150;
  el_nav2.style.transform = `translateY(${canShow?0:-100}%)`;
  el_nav1.style.cssText = `position:${canShow?'sticky':'relative'}; visibility:${canShow?'hidden':'visible'};`
}

window.addEventListener('scroll', debounce(animateNavigation, 99));
document.addEventListener('DOMContentLoaded', animateNavigation);

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
p {height:300vh;border:4px dashed #000;} /* force scrollbars */

#nav {
  position: relative;
  top: 0;
  width: 100%;
  padding: 20px;
  background: gold;
  transition: transform 0.6s;
}

<nav id="nav">NAVIGATION HERE</nav>
<p></p>

改进空间

• 尽量只使用一个元素（这里很难滚动回顶部...）
• 在animateNavigation 函数中使用附加条件来测试是否已执行操作（以防止在canShow 切换到新的布尔值之前对style 进行额外调用）