0

Here is the idea behind the code: The article has an avatar object in the beginning. e.g.:

<div class="column-right">
  <div class="inner">
    <h3>Header of article</h3>
    <div id="avatar">
      <img>
      <div>avatar title</div>
    </div>
    <p>long text</p>
  </div>
 </div>

When a user scrolls down, the avatar obviously disappears. So I wanted to make a clone of said avatar and put it in the left column using position fixed.

Here is the JavaScript code:

document.body.onscroll = function(e) {
    var scrolled = document.documentElement.scrollTop;
    var newAv;

    if ( (scrolled > avatarCoords.bottom) && !newAv ) { 
        //check if user scrolled below the avatar. if clone of avatar exists, do anything:

        newAv = avatar.cloneNode(true);  
        //clone actual element, whick user can't   see right now

        newAv.style.position = "fixed";
        newAv.style.left = 2 + "px";
        newAv.style.top = 10 + "px";

        document.body.appendChild(newAv);  //add clone in document
    }

    if( (scrolled < avatarCoords.bottom) && newAv ) {
        newAv.parentNode.removeChild(newAv);
    }
}

function getCoords(element) {
    var box = element.getBoundingClientRect();
    return {
        bottom: box.top + avatar.offsetHeight
    }
}

I don't understand why the first condition keeps responding even though the variable newAv is assigned. !newAv is supposed to be false after first cloning.

If you can answer the first question, tell me why newAv can't be removed as well.

Thank you!

Payden K. Pringle
  • 61
  • 1
  • 2
  • 19
Milex
  • 5
  • 1
  • 3

1 Answers1

0

You keep redefining newAV inside the onscroll function.

Make this a global variable (so this remembers the value from previous call):

var newAv;
document.body.onscroll = function(e) {
  var scrolled = document.documentElement.scrollTop; // etc
Rauli Rajande
  • 2,010
  • 1
  • 20
  • 24