Клонировать и исправить баннер с помощью 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