removeChild Syntax - Ich brauche ein paar erfahrene Augen

Question

Ich verwende die RemoveChild-Methode zum ersten Mal. Ich benutze Javascript, um meine Navbar so zu ändern, dass sie sich in feste Position ändert und mit dem Benutzer blättert. Dies bewirkt, dass der Inhalt des Body-Divs leicht nach oben springt, wenn dies geschieht. Als Ergebnis habe ich es geschafft, eine rote Box einzufügen (sie wird später weiß sein), um den zusätzlichen Platz einzunehmen, wenn sich die Position der Navbar ändert.

Ich brauche diese rote Box entfernt werden, wenn der Benutzer zurück nach oben scrollt, aber ich kann nicht scheinen, um die remove child -Funktion zu schießen. Wenn jemand einen Blick darauf werfen und mir in die richtige Richtung zeigen könnte, wäre das ein Segen!

Code (ein entsprechender Code-Abschnitt ist fett gedruckt):

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

als Schielen wies darauf hin, wenn Sie das Element machen, du bist Einstellung es ist style.id, das ist nicht richtig.

Wechsel:

filler.style.id = "fillerBox"; 

An:

filler.id = "fillerBox"; 

Und Ihr Code funktioniert.

Alternativ können Sie tun, wie andere vorgeschlagen haben, und das Feld im HTML selbst erstellen, es auf eine Klasse ohne Anzeige setzen und dann seine Klasse ändern. Nicht nur einfacher, sondern hält dich auch davon ab, zu erschaffen und zu zerstören. weniger ressourcenintensiv auf diese Weise.