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

Question

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

我要实现的是，我要标记横幅（从外部网站注入），当滚动后横幅隐藏时，较小的版本会顺利流动，当 window 到达它的顶部，它将固定在顶部。

我设法做到的是 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

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

Clone and fix banner with jQuery/ES5

javascript

performance

jquery

refactoring

ecmascript-5