滚动下来后粘滞的标题

Question

我在这个网站上看到了这个粘性标题:http : //dunked.com/ (不再有效,查看存档的网站)

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

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

Answer 1

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

最后,我们需要做的就是将一个应用transition: top 0.2s ease-in到我们的克隆中,这样当它处于.down状态时它会滑入视图.Dunked做得更好,但有一点点玩,很容易配置

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;
}

任一 香草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如何实现这种效果？" ,我不推荐这种方法.对于初学者来说,复制整个顶部导航可能会非常昂贵,并且没有真正的理由说明为什么我们不能使用原始导航(只需要一点点工作).

此外,保罗爱尔兰和其他人已经写过关于动画制作translate()方法比制作动画更好的方法top.它不仅性能更高,而且还意味着您不需要知道元素的确切高度.上面的解决方案将使用以下内容进行修改(请参阅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);
}

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

Answer 2

这是一个JS小提琴http://jsfiddle.net/ke9kW/1/

正如其他人所说,将标题设置为fixed,并使用display:none启动它

然后是jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

其中200是您希望它向下移动的像素高度.添加open类是为了允许我们运行elseif而不是else,所以有些代码不会在每个scrolllevent上运行,节省了一点点内存