jQuery：在滾動上多次克隆div

Question

我試圖找出如何在滾動上重復克隆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 {

  }
});

盡管這只會插入一次，但由於我想每800px插入一次（例如），因此給人的印象是該頁面永遠持續下去。 任何建議對此將不勝感激！

Answer 1

這是一個完整的猜測，但也許可以嘗試一下：

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

  }
});

Answer 2

這會起作用

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

  }
});

Answer 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的方法來控制滾動插入點

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 {

  }
});

仍然需要如上所述調整滾動標記。