问题描述
我必须改进代码，尤其是寻找性能（在这个项目中，我可以使用jQuery和ES5）。
我要实现的是我必须标记横幅广告（从外部网站注入），滚动后隐藏横幅广告时，较小的版本将平滑流动，并且当窗口到达顶部时，它将固定在最佳。
我设法做到的是 ：
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％正常工作，而且我不知道它是否更有效： 。 我应该提供更多信息吗？ 我在等你的帮助。
1楼
kruzyk
0
已采纳
2019-03-04 10:33:49
在朋友的帮助下，这是解决方案：
$(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');
}
});