マルチブラウザー CSS を必要とする動的グラデーションを追加しています。1 つのブラウザーで指示された場合は機能し、CSS ファイルに記述されている場合でも機能しますが、jquery で .css() メソッドを使用すると、バックグラウンドの読み込みに失敗します。ここで何をしようとしているのかを理解するために、すべてのブラウザー CSS を追加したときに機能しないコードの例を示します ...
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css({
'position': 'fixed', 'top': '0px', 'z-index': '9999',
'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'background': '#00172A',
'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))',
'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0 )',
'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'color': '#ffffff'
});
単一の「バックグラウンド」呼び出しを使用している間、選択したブラウザーで機能します。たとえば、これは firefox で機能します...
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css({
'position': 'fixed', 'top': '0px', 'z-index': '9999',
'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'color': '#ffffff'
});
コードはhttp://www.thediabetesnetwork.comで公開されています。 EDIT : json オブジェクトから css を削除し、jquery API を使用して修正しました。呼び出しが json 括弧で囲まれ、json 構文を使用する方法に注意してください..それが問題でした。今、それはこのように見えます。
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))');
$jj('.fixedElement').css(
{
'position': 'fixed',
'top': '0',
'z-index': '9999',
'width': '120%',
'paddingRight': '20%',
'paddingLeft': '20%',
'marginLeft': '-10%',
'left': '0',
'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'paddingTop': '0',
'paddingBottom': '0',
'color': '#ffffff'
});