Question

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

效果非常好。这是一个显示标记，css和javascript的CodePen： http://codepen.io/anon/pen/QpWXpj

从我所看到的唯一问题是，如果你快速滚动和向上滚动。这几乎就像代码无法做出足够快速的反应，并且在不需要时会添加detached类。这意味着在演示中，即使您处于浏览器的顶部，您也可以获得（可爱的）红色背景。

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

提前致谢！

Answer 1

你必须拿出

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

超出else块，以便菜单跳转修复始终适用，而不仅仅在满足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;
  });
});

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

1 个答案: