Question

这是代码背后的想法：文章开头有一个头像对象。 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>

当用户向下滚动时，化身显然会消失。所以我想复制一下所述头像并使用位置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应该是假的。

如果您可以回答第一个问题，请告诉我为什么newAv也无法删除。

谢谢！

Answer 1

您继续在onscroll函数中重新定义newAV。

将此设为全局变量（这样会记住上一次调用的值）：

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

JavaScript - 我说“如果”没有正确回复

1 个答案: