Javascript addEventListenerが機能しません

Question

私は、スクロールするときに隠すように、スクロールするときに再表示するために、私のウェブサイト上に私の見出しを入れようとしています。唯一の問題は、これを達成するために以下のコードをどのように使用するのか把握できないことです。私は広範囲に調査し、解決策を見いださなかった。どんな援助も感謝して、私が完全なnoobであることを実感してください。 :)

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

私は、彼らはあなたの全体のコードを示していないので、あなたが参照しているサイトのポイントが何であるかを知りません。あなたは彼らのデモページに移動し、[表示/ソースを見れば、あなたはこのような全リスナーのコードを参照してください。

(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)); 

これは完全に問題を修正する場合、彼らはあなたに不完全なコードを与えている可能性があるため、私は言うことができない

他の地域でも。