Question

我正在尝试将网页上的标题隐藏在向下滚动时隐藏，并在向上滚动时重新显示。唯一的问题是，我无法弄清楚如何使用下面的代码来实现这一目标。我搜索得很远，但没有找到解决方案。任何帮助都表示赞赏，并且在这方面确实意识到我是一个完整的菜鸟。 :)

window.addEventListener('scroll', throttle(throttleTimeout, function() {
        //...
        if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
          removeElementClass(element, elClassHidden);

        else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
          removeElementClass(element, elClassHidden);

        else if (wScrollDiff < 0) // scrolled down
        {
          if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
            removeElementClass(element, elClassHidden);

          else // scrolled down; element slides out
            addElementClass(element, elClassHidden);
        }
        //...
      }));

.header {
  width: 100%;
  height: 75px;
  position: fixed;
  z-index: 1000;
  background-color: Gray;
  top: 0;
  left: 0;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}
.header--hidden {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

    <header class="header" role="banner">
      <div id=Image>
        <a href="http://localhost/lab/">
          <img src="http://localhost/lab/includes/images/logo-small.png">
        </a>
      </div>

      <div id="menu">



        <ul id="menu">
          <li><a href="http://localhost/lab">Home</a>
          </li>

          <li><a href="http://localhost/lab/projects">Projects</a>
          </li>
          <li><a href="http://localhost/lab/videos">Videos</a>
          </li>
          <li><a href="http://localhost/lab/contact">Contact</a>
          </li>
          <li><a href="http://localhost/lab/about">About</a>
          </li>
        </ul>


      </div>
    </header>

View the site from which this code was taken.

Answer 1

我不知道您引用的网站的重点是什么，因为他们没有向您展示整个代码。如果您转到他们的演示页面并查看View / Source，您会看到整个侦听器代码：

( function ( document, window, index )
    {

    'use strict';

    var elSelector  = '.header',
        element     = document.querySelector( elSelector );

    if( !element ) return true;

    var elHeight        = 0,
        elTop           = 0,
        dHeight         = 0,
        wHeight         = 0,
        wScrollCurrent  = 0,
        wScrollBefore   = 0,
        wScrollDiff     = 0;

    window.addEventListener( 'scroll', function()
    {
        elHeight        = element.offsetHeight;
        dHeight         = document.body.offsetHeight;
        wHeight         = window.innerHeight;
        wScrollCurrent  = window.pageYOffset;
        wScrollDiff     = wScrollBefore - wScrollCurrent;
        elTop           = parseInt( window.getComputedStyle( element ).getPropertyValue( 'top' ) ) + wScrollDiff;

        if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
            element.style.top = '0px';

        else if( wScrollDiff > 0 ) // scrolled up; element slides in
            element.style.top = ( elTop > 0 ? 0 : elTop ) + 'px';

        else if( wScrollDiff < 0 ) // scrolled down
        {
            if( wScrollCurrent + wHeight >= dHeight - elHeight )  // scrolled to the very bottom; element slides in
                element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';

            else // scrolled down; element slides out
                element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px';
        }

        wScrollBefore = wScrollCurrent;
    });

}( document, window, 0 ));

我不能说这是否能完全解决问题，因为他们也可能在其他方面给你不完整的代码。

Javascript addEventListener不起作用

1 个答案: