nav fadeinout

2020年3月15日

 
 <script>
    window.addEventListener('DOMContentLoaded', function () {
      headerFix.scrollWindow();
    }, false);

    var headerFix = (function () {
      var headGnav = headGnav = document.getElementsByClassName('head-gnav')[0],
        headGnavHeight = headGnav.clientHeight,
        headNavInfo = document.getElementsByClassName('head-nav__info')[0],
        headNavInfoHeight = headNavInfo.clientHeight,
        lTopnotice = document.getElementsByClassName('l-topnotice')[0],
        scrollFlag,
        fadeFlag,
        startPosition = 0;

      var fixNav = function () {
        var scrollHeight = window.pageYOffset;

        clearTimeout(scrollFlag);
        scrollFlag = setTimeout(function () {
          if (headGnavHeight <= scrollHeight) {
            var extraHeight = 0;
            if (lTopnotice !== void 0) {
              extraHeight = Number(lTopnotice.style.marginTop.replace('px', ''));
            }
            headGnav.setAttribute('style', 'margin-bottom: ' + (headNavInfoHeight + extraHeight) + 'px;');
            headNavInfo.setAttribute(
              'style', 'position: fixed; top: 0; width: 100%; background-color: rgba(255, 255, 255, .8); z-index: 999;'
            );
          } else {
            headGnav.removeAttribute('style');
            headNavInfo.removeAttribute('style');
          }
        }, 5);
      }

      var fadeNav = function () {
        var maxScrollYHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight,
          scrollTop = window.pageYOffset || document.documentElement.scrollTop,
          currentPosition = scrollTop;

        clearTimeout(fadeFlag);
        fadeFlag = setTimeout(function () {
          if (scrollTop >= headGnavHeight) {
            if (currentPosition >= startPosition) {
              headNavInfo.classList.add('dispBlock');
              headNavInfo.classList.remove('dispNone');
            } else {
              headNavInfo.classList.add('dispNone');
              headNavInfo.classList.remove('dispBlock');
            }

            if (currentPosition === maxScrollYHeight) {
              headNavInfo.classList.add('dispNone');
              headNavInfo.classList.remove('dispBlock');
            }

            startPosition = currentPosition;
          } else {
            headNavInfo.classList.add('dispBlock');
            headNavInfo.classList.remove('dispNone');
          }

          startPosition = currentPosition;
        }, 5);
      }

      var scrollWindow = function () {
        window.addEventListener('scroll', function () {
          fixNav();
          fadeNav();
        }, false);
      }

      return {
        scrollWindow: scrollWindow
      }
    })();
  </script>
  <style>
    .dispBlock {
      animation-name: dispBlock;
      animation-duration: .5s;
      animation-fill-mode: forwards;
      display: block;
    }

    .dispNone {
      animation-name: dispNone;
      animation-duration: .5s;
      animation-fill-mode: forwards;
      overflow: hidden;
    }

    @keyframes dispBlock {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes dispNone {
      0% {
        opacity: 1;
      }

      100% {
        height: 0;
        opacity: 0;
      }
    }
  </style>