JavaScript - "if"が適切に応答しないことを条件とします。

Question

コードの背後にある考え方は次のとおりです。記事には最初にアバターオブジェクトがあります。例：

<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> 

ユーザーがスクロールすると、明らかにアバターが表示されなくなります。だから私は、アバターのクローンを作って、位置fixedを使って左の列に入れたいと思っていました。ここで

は、JavaScriptコードは次のとおりです。

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 
    } 
} 

第一の条件は、変数newAvが割り当てられていても応答し続ける理由を私は理解していません。 !newAvは、最初のクローン作成後にfalseになるはずです。

最初の質問に答えることができる場合は、newAvも削除できない理由を教えてください。

ありがとうございました！

Answer 1

onscroll関数内でnewAVを再定義し続けます。

このグローバル変数（そう、これは前の呼び出しから値を覚えて）ください：

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