我正在处理的网站有一个横幅/底部条,当用户向下滚动页面时加载它,并在他们向上滚动时再次隐藏。我添加了一些逻辑,以便在浏览器不支持 CSS3 转换 (IE8-) 时进行故障保护。但是,我使用的 jQuery 故障保护在 IE8 上非常慢,我认为这是动画调用。有什么建议吗?
var Detect = (function() {
var
//Add CSS properties to test for
props = "transition".split(","),
//Browser prefixes
CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
d = document.createElement("detect"),
test = [],
p, pty;
// test prefixed code
function TestPrefixes(prop) {
var
Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
for (var n = 0, np = All.length; n < np; n++) {
if (d.style[All[n]] === "") return true;
}
return false;
}
for (p in props) {
pty = props[p];
test[pty] = TestPrefixes(pty);
}
return test;
}());
if (Detect.transition) {
$(function(){
$(window).scroll(function() {
if($(document).scrollTop() > 250)
{
$('#carriage-promo').addClass("show");
}
else
{
$('#carriage-promo').removeClass("show");
}
});
})
} else {
$(window).scroll(function() {
if ($(this).scrollTop() < 250) {
$("#carriage-promo").animate({
height: 0
},300);
} else {
$("#carriage-promo").animate({
height: '40px'
},300);
}
});
}
#carriage-promo {
background: black;
width: 964px;
height: 0px;
position: fixed;
z-index:300;
display:none;
bottom: 0;
overflow:none;
text-align: center;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
#carriage-promo.show {
height: 40px;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
}
if ( vDandT >= 201308190000 && vDandT < 201308220000 ) {
$('#carriage-promo').html('<img alt="" src=" <venda_entmediaadd>/ebiz/<venda_bsref>/resources/images/promos/NEXT2_soon.gif" />')
.css({'display':'inline-block'});