向上滚动时删除div

Question

我要做的是在滚动时删除页面的<header>。这是我到目前为止所拥有的 - jsFiddle。

这是代码：

var scrollPoint = $('section').offset().top,
    scrolledPast = false;

$(window).scroll(function() {
  if ($(window).scrollTop() > scrollPoint) {
    scrolledPast = true;
  }

  if ($(window).scrollTop() < scrollPoint && scrolledPast == true) {
    $(window).scrollTop(scrollPoint);
    $('header').remove();
    $('html, body').animate({scrollTop: 0}, 0);
    scrolledPast = false;
    scrollPoint = 0;
    return false;
  }
});

基本上，访问者可以正常向下滚动页面，只有当访问者向上滚动到<header>的顶部时才会删除<section>。

我留下的唯一问题是访问者使用滚动条而不是鼠标滚轮进行滚动。如果他正在使用滚动条，在<header>被删除后，一切都会因为显而易见的原因而下降。有关解决这个问题的任何想法吗？

Answer 1

喜欢这样吗？

jsFiddle

$(window).on('scroll', function(e) {
    var a = $(this).scrollTop(),
        b = $('section').offset().top,
        c = $(this).data('sp');

    if (a >= b) $(this).data('sp', true);
    if (c && a <= b) {
        $('header').remove();
        $(window).scrollTop(0);
    }
})