ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript ie6 互換位置:固定実装アイデア_JavaScript スキル

JavaScript ie6 互換位置:固定実装アイデア_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:38:42979ブラウズ

positon:fixed を使用すると、HTML 要素をドキュメント フローから分離し、ブラウザー内の特定の位置に固定できます
この配置モードを使用する Web ページにはフローティング ナビゲーション バーがよくありますが、この配置は IE6 と互換性がありません
フローティング ナビゲーション バーのスタイルで重要なのは、position:fixed;bottom:60px; (フローティング ナビゲーションの下部はウィンドウの下部から 60px です)

コードをコピーします コードは次のとおりです:

.floating_9677{position:fixed; z-index:961;}

position:fixed は ie6 では機能しません。これは js でのみ実現できます。 まず、ie6 では、位置を絶対
コードをコピーします コードは次のとおりです:
position:fixed;bottom:60px;_position:abosulte;

追加浮動要素の属性識別子。js はこの属性を通じてこれらの浮動要素を見つけることができます。 tag="floatNavigator"
作業中、フローティング ナビゲーション バーは主に上部または下部に配置されます。

コードをコピー コードは次のとおりです:
//ie6 互換位置: 固定
function fixPositionCompatibility (){
//ie6 ブラウザが
if( $.browser.msie || parseInt($.browser.version,10) <= 6){
var vavigators であるかどうかを判断します= $(" [tag='floatNavigator']");
if(!navigators.length)return;
//各フローティングレイヤーが上部に固定されているか下部に固定されているかを判定します
$。 each(navigators, function( ){
this.top = $(this).css("top");
this.bottom = $(this).css("bottom");
this .isTop = this.top == "auto" ?
});
window.attachEvent("onscroll", function(){
varscrollTop = document.documentElement.scrollTop || document.body.scrollTop;
$.each(navigators, function(){
this.style.top = this.isTop ?scrollTop parseInt(this.top) "px" :scrollTop $(window).height () - $(this ).outerHeight() - parseInt(this.bottom) "px"
})
});
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。