向下滚动后的置顶标题

2022-01-11 00:00:00 header jquery javascript sticky

我在这个网站上看到了这个粘性标题:http://dunked.com/ (不再活跃，查看存档站点)

I saw this sticky header on this website: http://dunked.com/ (no longer active, view archived site)

当您向下滚动时，粘性标题会从顶部向下.

When you scroll down the sticky header comes down from the top.

我查看了代码，但它看起来非常复杂.我只明白这一点:正常的标题是用 JS 克隆的，当你向下滚动页面时，它会从顶部开始动画.

I looked at the code, but it looks really complicated. I only understand this: The normal header was cloned with JS and when you scroll down the page it animates from top.

推荐答案

开始.基本上，我们在加载时复制标题，然后检查(使用 .scrollTop() 或 window.scrollY)以查看用户何时滚动超过一个点(例如 200 像素).然后我们简单地切换一个类(在本例中为 .down)，它将原始文件移到视图中.

Here's a start. Basically, we copy the header on load, and then check (using .scrollTop() or window.scrollY) to see when the user scrolls beyond a point (e.g. 200pixels). Then we simply toggle a class (in this case .down) which moves the original into view.

最后，我们需要做的就是对我们的克隆应用一个 transition: top 0.2s ease-in ，这样当它处于 .down 状态时它会滑入看法.Dunked 做得更好，但稍微玩一下就很容易配置

Lastly all we need to do is apply a transition: top 0.2s ease-in to our clone, so that when it's in the .down state it slides into view. Dunked does it better, but with a little playing around it's easy to configure

CSS

header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

任一 Vanilla JS(根据需要填充)

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

或 jQuery

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

<小时>

新的思考

虽然上面回答了 OP 的原始问题 Dunked 如何实现这种效果?"，但我不推荐这种方法.对于初学者来说，复制整个顶部导航可能会非常昂贵，而且我们没有真正的理由不能使用原始导航(需要做一些工作).

Newer Reflections

Whilst the above answers the OP's original question of "How does Dunked achieve this effect?", I wouldn't recommend this approach. For starters, copying the entire top navigation could be pretty costly, and there's no real reason why we can't use the original (with a little bit of work).

此外，Paul Irish 和其他人有 写了如何使用 translate() 制作动画比使用 top 制作动画效果更好.它不仅性能更高，而且还意味着您不需要知道元素的确切高度.上述解决方案将使用以下 (参见 JSFiddle) 进行修改:

Furthermore, Paul Irish and others, have written about how animating with translate() is better than animating with top. Not only is it more performant, but it also means that you don't need to know the exact height of your element. The above solution would be modified with the following (See JSFiddle):

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

使用转换的唯一缺点是，虽然 浏览器支持非常好，但您可能需要添加供应商前缀版本以最大限度地提高兼容性.

The only drawback with using transforms is, that whilst browser support is pretty good, you'll probably want to add vendor prefixed versions to maximize compatibility.

相关文章