使用jQuery / ES5克隆并修复横幅

Question

我必须改进我的代码，特别是寻找性能（在这个项目中我可以使用jQuery和ES5）。

我想要实现的是我必须标记横幅（从外部网站注入），滚动后横幅隐藏，然后较小的版本将顺利流动，当窗口到达顶部时，它将被固定到最佳。

我设法做的是jsFiddle：

var bannerDA = $('div[class*="-a--katalog"]');
var bannerClone = $();
var clone = $();
var CLONE_HEIGHT = 100;
var bannerDABottom = bannerDA.offset().top + 200;       // bannerDA.height() not working for iframe ??

$(document).ready(function() {
    if (bannerDA.length !== 0) {
        $(window).on('scroll', function() {
            if ($(window).scrollTop() > bannerDABottom && bannerClone.length == 0) {
                bannerClone = bannerDA.clone()
                // avoid paragraphs and insert before first div:
                .insertBefore('.subcontent-body div:eq(0)') 
                .addClass('clone')
                .animate({height: CLONE_HEIGHT}, 500);               
            } else if ($(window).scrollTop() <= bannerDABottom && bannerClone.length > 0) {
                bannerClone.animate({height: '0'}, 200, function() {
                    bannerClone.remove();
                    bannerClone = $();
                });
            } else if ($(window).scrollTop() > bannerClone.offset().top && clone.length == 0) { 
                clone = bannerClone.clone()
                                   .css('opacity', '1')
                                   .css('height', CLONE_HEIGHT)
                                   .appendTo('.subcontent-body')
                                   .addClass('clone--fixed');
            } else if ($(window).scrollTop() <= bannerClone.offset().top && clone.length > 0) {
                clone.remove();
                clone = $();
            }
        }).trigger('scroll');
    }
});

我怎么能重构它？

/编辑：

在声明变量时创建一个空的jQuery对象是一个好习惯吗？ //我这样做是为了能够检查对象是否存在（长度）。

也许最好克隆横幅一次，然后只显示并隐藏它，而不是在滚动上处理所有内容？

我应该两次克隆横幅吗？也许应该有一个副本，静态或固定，具体取决于scrollTop。你如何防止页面跳跃？

经过多次尝试，我设法编写了一个类似的工作代码，但它不能按我想要的方式100％工作，我不知道它是否更有效：jsFiddle。我应该提供更多信息吗？我在等你的帮忙。

Answer 1

在朋友的帮助下，这是解决方案：

$(document).ready(function() {
  var bannerDA = $('div[class*="-a--katalog"]');
  var bannerClone = $();
  var clone = $();
  var CLONE_HEIGHT = 100;

  if (bannerDA.length !== 0) {

    const bannerDABottom = bannerDA.offset().top + 200; // bannerDA.height() not working for iframe ??

    $(window).on('scroll', function() {
      const scrollTop = $(window).scrollTop();

      if (scrollTop > bannerDABottom && bannerClone.length === 0) {
        bannerClone = bannerDA.clone()
          // avoid paragraphs and insert before first div:
          .insertBefore('.subcontent-body div:eq(0)')
          .addClass('clone')
          .animate({
            height: CLONE_HEIGHT
          }, 500);
        return;
      }

      if (scrollTop <= bannerDABottom && bannerClone.length > 0) {
        bannerClone.animate({
          height: '0'
        }, 200, function() {
          bannerClone.remove();
          bannerClone = $();
        });
        return;
      }

      if (scrollTop > bannerClone.offset().top && clone.length === 0) {
        clone = bannerClone.clone()
          .css('opacity', '1')
          .css('height', CLONE_HEIGHT)
          .appendTo('.subcontent-body')
          .addClass('clone--fixed');
        return;
      }

      if (scrollTop <= bannerClone.offset().top && clone.length > 0) {
        clone.remove();
        clone = $();
        return;
      }
    }).trigger('scroll');
  }
});

jsFiddle