removeChild構文 - 私は経験豊富な目を必要とします

Question

私は初めてremoveChildメソッドを使用しています。私はjavascriptを使用してNavbarを修正して固定位置に変更し、ユーザーとスクロールします。これが起こると、body divの内容が少し上に飛びます。その結果、私は、ナビゲーションバーの位置が変わったときに余分なスペースを取るために、赤いボックス（後で白くなる）を挿入することができました。

ユーザーが上にスクロールするときに赤いボックスを削除する必要がありますが、削除する子の機能を起動できないようです。誰かが見て、正しい方向に私を指すことができる場合、それは膨らむだろう！

コード（関連するコードセクションは太字である）：

var fillerState = false; 
// fixed positioning on scroll property for taskbar: 
    window.addEventListener('scroll', function (evt) { 
     var distance_from_top = document.body.scrollTop; 
     if (distance_from_top <= 80) { 
     document.getElementById("navBar").style.position = "static"; 
     document.getElementById("navBarList").style.borderBottom = "solid black 4px"; 
     document.getElementById("navBar").style.borderTop = "initial"; 
     var myCollection = document.getElementsByClassName("navBarLink"); 
     var collectionLength = myCollection.length; 
     for(var i = 0; i < collectionLength; i++){ 
      myCollection[i].style.borderTopLeftRadius = "1em"; 
      myCollection[i].style.borderTopRightRadius = "1em"; 
      myCollection[i].style.borderBottomLeftRadius = "initial"; 
      myCollection[i].style.borderBottomRightRadius = "initial"; 
      } 
// stops loads of boxes from forming: 
     **if(fillerState == true){ 
      var parentRemove = document.getElementById("bodyDiv"); 
      var fillerBoxRemove = document.getElementById("fillerBox"); 
      parentRemove.removeChild(fillerBoxRemove); 
      fillerState = false; 
      alert(fillerState);** 
     } 

     } 


     else if(distance_from_top > 80) { 
      document.getElementById("navBar").style.position = "fixed"; 
      document.getElementById("navBar").style.top = "0px"; 
      document.getElementById("navBar").style.borderTop = "solid black 4px"; 
      document.getElementById("navBarList").style.borderBottom = "initial"; 
      var myCollection = document.getElementsByClassName("navBarLink"); 
      var collectionLength = myCollection.length; 
      if(fillerState == false){ 

     // sets filler element so that the page doesn't bounce: 
       var filler = document.createElement("div"); 
       filler.style.width = "200px"; 
       filler.style.height = "80px"; 
       filler.style.backgroundColor = "red"; 
       filler.style.id = "fillerBox"; 

     //defines where the new element will be placed: 
       var parent = document.getElementById("bodyDiv"); 
       var brother = document.getElementById("leftColumn"); 
       parent.insertBefore(filler,brother); 
       fillerState = true; 

      } 



      for(var i = 0; i < collectionLength; i++){ 
       myCollection[i].style.borderTopLeftRadius = "initial"; 
       myCollection[i].style.borderTopRightRadius = "initial"; 
       myCollection[i].style.borderBottomLeftRadius = "1em"; 
       myCollection[i].style.borderBottomRightRadius = "1em"; 
       } 
     } 

    }); 

Answer 1

斜視が指摘したように、あなたが要素を作っているとき、あなたはそれが正しいではありませんstyle.id、だ設定しています。

filler.style.id = "fillerBox"; 

：

変更

filler.id = "fillerBox"; 

そして、あなたのコードが動作します。

他の人が示唆しているように、HTML自体にボックスを作成し、表示のないクラスに設定してからクラスを変更することもできます。だけでなく、作成や破壊からあなたを停止します。それほどリソースの集中的な方法ではありません。