javascript - 用户向上滚动时显示标题 - 如果激活太快则未对齐

Question

当用户向下滚动页面时，我网站上的标题消失了。如果用户开始向上滚动，标题会再次显示，即使他们在页面的中间位置。如果用户开始向下滚动，标题会再次消失。

效果还不错。这是一个显示标记、css 和 javascript 的 CodePen: http://codepen.io/anon/pen/QpWXpj

据我所知，它唯一的问题是滚动速度非常快。这几乎就像代码不能足够快地使用react，并且在不需要时添加了 detached 类。这意味着在演示中，即使您位于浏览器顶部，您也会获得(可爱的)红色背景。

任何人都可以帮助/建议如何修改脚本以防止这种情况发生吗？

提前致谢!

Answer 1

你必须取出

if (!currentScroll) {
    header.removeClass('detached');
}

在 else block 之外，以便菜单跳转修复始终适用，而不仅仅是在满足 else 条件时。

检查更新的代码笔:http://codepen.io/nashcheez/pen/KWKjjq

所以你的js代码变成:

/* ==========================================================================
   #SHOW/HIDE HEADER
   ========================================================================== */

$(function() {

  var previousScroll = 0, // previous scroll position
    menuOffset = 70, // height of menu (once scroll passed it, menu is hidden)
    detachPoint = 220, // point of detach (after scroll passed it, menu is fixed)
    hideShowOffset = 5, // scrolling value after which triggers hide/show menu
    header = $('.page-head');

  $(window).scroll(function() {

    if (header.hasClass('expanded')) return;

    var currentScroll = $(this).scrollTop(),
      scrollDifference = Math.abs(currentScroll - previousScroll);

    // if scrolled past menu
    if (currentScroll > menuOffset) {
      // if scrolled past detach point add class to fix menu
      if (currentScroll > detachPoint) {
        var value = parseInt(header.css('transform').split(',')[5]);
        console.log(value);
        if (!header.hasClass('transitioning') && !header.hasClass('detached') && value != -110) {
          header.addClass('transitioning').one('transitionend', function() {
            console.log('transitionend');
            header.removeClass('transitioning');
            if (currentScroll > detachPoint) header.addClass('detached');
          });
        } else if (!header.hasClass('transitioning') && !header.hasClass('detached')) {
          header.addClass('detached');
        }
      }

      // if scrolling faster than hideShowOffset hide/show menu
      if (scrollDifference >= hideShowOffset) {
        if (currentScroll > previousScroll) {
          // scrolling down; hide menu
          if (!header.hasClass('invisible'))
            header.addClass('invisible');
        } else {
          // scrolling up; show menu
          if (header.hasClass('invisible'))
            header.removeClass('invisible');
        }
      }
    } 
    // only remove “detached” class if user is at the top of document (menu jump fix)
    if (!currentScroll) {
        header.removeClass('detached');
      }

    // If user is at the bottom of document show menu.
    if ($(window).height() + currentScroll == $(document).height()) {
      header.removeClass('invisible');
    }

    // Replace previous scroll position with new one.
    previousScroll = currentScroll;
  });
});

/* ==========================================================================
   #SHOW/HIDE NAVIGATION
   ========================================================================== */

/* 
 * Creates classes to enable responsive navigation.
 */

// Wait for the DOM to be ready (all elements printed on page regardless if 
// loaded or not).
$(function() {

  // Bind a click event to anything with the class "toggle-nav".
  $('.page-head__toggle').click(function() {
    if ($('body').hasClass('show-nav')) {
      $('body').removeClass('show-nav').addClass('hide-nav');

      setTimeout(function() {
        $('body').removeClass('hide-nav');
      }, 500);

    } else {
      $('body').removeClass('hide-nav').addClass('show-nav');
    }
    // Deactivate the default behavior of going to the next page on click.
    return false;
  });
});