私が取り組んでいる Web サイトには、ユーザーがページを下にスクロールすると読み込まれ、上にスクロールすると再び非表示になるバナー/ボトム ストリップがあります。ブラウザーが 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'});