私の関数がグローバル変数を認識しないのはなぜですか？（JavaScript）

私の問題は、bodyの下部にあるscript要素にあります。 pageTop,menuおよびyPosという変数をyScroll関数内に宣言すると機能は正常に動作しますが、外に出ているときは機能しません。それらが関数の外にあり、グローバル変数である場合、私のfunctionはまだそれらを使用できないはずですか？なぜ私は関数の外で変数を定義しようとすると動作しないのか分かりません。私の関数がグローバル変数を認識しないのはなぜですか？（JavaScript）

はここ

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     body { 
      margin: 0px; 
      text-align: center; 
     } 

     #pagetop { 
      position: fixed; 
      top: 0px; 
      width: 100%; 
      height: 120px; 
      background: #06C; 
      color: #FFF; 
      font-size: 23px; 
      padding-top: 50px; 
      transition: height 0.3s linear 0s, padding 0.3s linear 0s; 
      overflow: hidden; 
     } 

     #pagetop > #menu { 
      position: absolute; 
      bottom: 0px; 
      width: 100%; 
      background: #004A95; 
      height: 50px; 
      transition: height 0.3s linear 0s; 
     } 

     #wrapper { 
      margin-top: 230px; 
     } 
    </style> 
</head> 

<body> 
    <div id="pagetop"> 
     Header 
     <div id="menu">Menu system</div> 
    </div> 
    <div id="wrapper"> 
     <script> 
      for(i = 0; i < 40; i++) 
      { 
      document.write("<h2>dummy page content</h2>") 
      } 
     </script> 
    </div> 
    <script> 

     var pagetop = document.getElementById('pagetop'); 
     var menu = document.getElementById('menu'); 
     var yPos = window.pageYOffset; 

     window.addEventListener('scroll', yScroll); 

     function yScroll() { 
      if (yPos > 150) { 
       pagetop.style.height = '36px'; 
       pagetop.style.paddingTop = '8px'; 
       menu.style.height = '0px'; 
      } 
      else { 
       pagetop.style.height = '120px'; 
       pagetop.style.paddingTop = '50px'; 
       menu.style.height = '50px'; 
      } 
     } 

    </script> 
</body> 

</html>

出典

2016-06-28 alex

みんなありがとう、私はそれがYPOS変数を持つものだった考え出し。 – alex

あなたのコードだけで、ページの読み込みで一度設定されていることyPos除いて、正常に動作していると、常に0に滞在するコードです。

ことは、これを解決するには、イベントハンドラは、あなたのyScroll関数の内部で、呼び出されたスクロール位置を毎回読んで：

<!DOCTYPE html> <html> <head> <style> body { margin: 0px; text-align: center; } #pagetop { position: fixed; top: 0px; width: 100%; height: 120px; background: #06C; color: #FFF; font-size: 23px; padding-top: 50px; transition: height 0.3s linear 0s, padding 0.3s linear 0s; overflow: hidden; } #pagetop > #menu { position: absolute; bottom: 0px; width: 100%; background: #004A95; height: 50px; transition: height 0.3s linear 0s; } #wrapper { margin-top: 230px; } </style> </head> <body> <div id="pagetop"> Header <div id="menu">Menu system</div> </div> <div id="wrapper"> <script> for (i = 0; i < 40; i++) { document.write("<h2>dummy page content</h2>") } </script> </div> <script> var pagetop = document.getElementById('pagetop'); var menu = document.getElementById('menu'); window.addEventListener('scroll', yScroll); function yScroll() { var yPos = window.pageYOffset; if (yPos > 150) { pagetop.style.height = '36px'; pagetop.style.paddingTop = '8px'; menu.style.height = '0px'; } else { pagetop.style.height = '120px'; pagetop.style.paddingTop = '50px'; menu.style.height = '50px'; } } </script> </body> </html>

出典

2016-06-28 01:10:37 Timo

スニペットが動作します（http://codepen.io/f7o/pen/JKWKgb）

yPos変数ドキュメントの読み込み時にのみ設定され、スクロール時には再び表示されません。

出典

2016-06-28 01:10:55 f7o

あなたの関数はグローバル変数を認識するです。問題は、一度だけ設定されます。あなたは、基本的に関数スコープ外yPosを初期化することにより、何をやっている：あなたは値を再割り当てされていないため、

var yPos = window.pageYOffset

は、

var yPos = 0

これは決して変わらないです。 yPosは動的でなければならないので、これをスコープに移動する必要があります（実際には宣言する必要はありません）。他の変数は変更されていないため、外側はきれいです。

Here's a JSFiddle

出典

2016-06-28 01:13:49 scottgearyau

私の関数がグローバル変数を認識しないのはなぜですか？ （JavaScript）

答えて

関連する問題

私の関数がグローバル変数を認識しないのはなぜですか？（JavaScript）