jQuery：在滚动时多次克隆 div答案

【问题标题】：jQuery: clone div multiple times on scrolljQuery：在滚动时多次克隆 div
【发布时间】：2018-08-17 13:08:49
【问题描述】：

我试图弄清楚如何在滚动时重复克隆 div 的内容，从而给人一种页面永远持续存在的印象。到目前为止，我的标记如下，这里也是一个小提琴https://jsfiddle.net/guht49La/：

var inserated = false
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 800 && inserated == false) {
    var $button = $('.hd').clone();
    ($button).insertBefore('.ap');
    inserated = true;
  } else {

  }
});

虽然这只插入一次，但我想每隔 800 像素（例如）继续插入一次，从而给人一种页面永远持续存在的印象。对此的任何建议将不胜感激！

【问题讨论】：

您是否将inserted 设置为false？如果没有，则需要在滚动800px后设置。

标签： javascript jquery html css scroll

【解决方案1】：

这会起作用

var inserated = false
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 800) {
    var $button = $('.hd').clone();
    ($button).insertBefore('.ap');
    inserated = true;
  } else {

  }
});

【讨论】：

【解决方案2】：

这是一个完整的猜测，但不妨试一试：

var nextInsert = 800;
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= nextInsert) {
    var $button = $('.hd').clone();
    ($button).insertBefore('.ap');
    nextInsert += 800;
  } else {

  }
});

【讨论】：

【解决方案3】：

它正在工作，但它只克隆了一次 div，因为您在插入第一个克隆后将 inserated 变量更改为 true。如果您删除它，它将无限期地工作：

var inserated = false
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 800 && inserated == false) {
    var $button = $('.hd').clone();
    ($button).insertBefore('.ap');
    // inserated = true;
  } else {

  }
});

注意inserated = true; 已被注释掉。

但是，该代码可以（并且几乎可以肯定）创建大量克隆，因此我建议使用类似于 Nat Karmios answer 的内容来控制滚动插入点

【讨论】：

【解决方案4】：

我的建议类似于jbmartinez 的答案，除了我将完全删除inserated 变量并使用类来确定要克隆的元素：

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 800) {
    var $button = $('.hd').not(".cloned").clone();
    $button.addClass("cloned");
    ($button).insertBefore('.ap');
  } else {

  }
});

仍然需要如上所述调整滚动标记。

【讨论】：