JavaScript を使用してナビゲーション バーのホバー効果を実現する方法に関するグラフィック コードの詳細な説明

前回ナビゲーション バーが上にあったページが IE で実行されている場合、ナビゲーション バーの配置方法を絶対から固定に変更することで完璧な解決策が得られました。 [JS-Realizing Navigation Bar Hover] では、ナビゲーション バーがホバーされているページを IE で実行すると、ナビゲーション バーが揺れ続けると述べました。

解決策は次のとおりです:
ナビゲーションバーの位置決め方法を絶対から固定に変更したため、揺れなくなりました。 。 -_-||


コードは次のとおりです:

p.navigation{ 
width: 800px; 
height: 40px; 
background: red; 
margin: 4px auto 0; 
top: 400px; 
left: 0px; 
position: fixed; 
}

このため、JS もそれに応じて変更する必要があります。

固定位置はブラウザの表示領域に基づいているため、ナビゲーション バーの元の位置を変更する必要があります。

//记录导航条原来在页面上的位置 
var naviga_offsetTop = 0; 
var naviga_offsetLeft = 0; 

//IE7不识别getElementsByClassName，为了兼容自定义一个 
function my_getElementsByClassName(class_name) { 
var el = []; 
//获取所有元素 
_el = document.getElementsByTagName('*'); 
//通过className刷选 
for (var i=0; i<_el.length; i++ ) { 
if (_el[i].className == class_name ) { 
el[el.length] = _el[i]; 
} 
} 
return el; 
} 

//导航条，悬停在顶部 
function naviga_stay_top(){ 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 

document.title = scrollTop; 
//如果向下滚动的距离大于原来导航栏离顶部的距离 
//直接将导航栏固定到可视区顶部 
if( scrollTop > naviga_offsetTop ){ 
a_navigation_bar[0].style.top = 0 + "px"; 
} else { 
//如果向下滚动的距离小原来导航栏离顶部的距离，则重新计算导航栏的位置 
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px"; 
} 
} 

//给导航条上四个tab，加上点击事件。 
window.onload=function(){ 
var a_tabs = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_tabs = document.getElementsByClassName("tab"); 
}else{ //IE 
a_tabs = my_getElementsByClassName("tab"); 
} 

var a_contents = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_contents = document.getElementsByClassName("content"); 
}else{//IE 
a_contents = my_getElementsByClassName("content"); 
} 

//获取offsetLeft，即导航栏离左边框的距离 
var a_main_p = []; 
if( document.getElementsByClassName ){//Chrome, FF 
a_main_p = document.getElementsByClassName("main"); 
}else{ //IE 
a_main_p = my_getElementsByClassName("main"); 
} 
naviga_offsetLeft = a_main_p[0].offsetLeft; 

a_tabs[0].onclick=function(){ 
window.scrollTo(0, a_contents[2].offsetTop); 
} 
a_tabs[1].onclick=function(){ 
window.scrollTo(0, a_contents[3].offsetTop); 
} 
a_tabs[2].onclick=function(){ 
window.scrollTo(0, a_contents[4].offsetTop); 
} 
a_tabs[3].onclick=function(){ 
window.scrollTo(0, a_contents[5].offsetTop); 
} 

//获取页面上，导航条到顶部的位置 
var a_navigation_bar = []; 
if(document.getElementsByClassName){//Chrome, FF 
a_navigation_bar = document.getElementsByClassName("navigation"); 
} else {//IE 
a_navigation_bar = my_getElementsByClassName("navigation"); 
} 
//获取offsetTop 
naviga_offsetTop = a_navigation_bar[0].offsetTop; 
a_navigation_bar[0].style.left = naviga_offsetLeft + "px"; 

//给滚动条以及鼠标加上滚动事件 
if( window.attachEvent) //IE 
{ 
window.attachEvent("onmousewheel", naviga_stay_top); 
window.attachEvent("onscroll", naviga_stay_top); 

document.attachEvent("onmousewheel", naviga_stay_top); 
document.attachEvent("onscroll", naviga_stay_top); 
} else {//Chrome ,FF 
window.addEventListener("mousewheel", naviga_stay_top,false); 
window.addEventListener("scroll", naviga_stay_top,false); 

document.addEventListener("mousewheel", naviga_stay_top,false); 
document.addEventListener("scroll", naviga_stay_top,false); 
} 
}

この質問では、CSS+p の配置 (相対、絶対、静的、固定) の違いを理解することが重要です。

相対、絶対、静的、固定


まず各属性値の定義を見てみましょう:
1. 静的: デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

2. 相対: 相対的に配置された要素を生成し、上、下、左、右の設定を通じて通常の位置を基準にして配置します。階層的な分類は、z-index を通じて実行できます。

3. 絶対: 絶対配置の要素を生成し、静的配置以外の最初の親要素を基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

4. 修正: 絶対的に配置された要素を生成し、ブラウザー ウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

静的および固定の位置決め方法は理解しやすいため、ここでは分析しません。以下は、より一般的に使用される相対と絶対の分析です:

1.相対的に配置された要素は通常のテキスト フローから削除されますが、テキスト フロー内のその位置はまだ存在します。図 1 に示すように:


図 1 背景が黄色のレイヤーは相対的に配置され、赤い枠線の領域は通常のフローでの位置です。上と左を通して配置した後、灰色の背景レイヤーの位置から、通常の位置がまだ存在していることがわかります。

2. 絶対。絶対として配置されたレイヤーは通常のテキスト フローから分離されますが、相対との違いは、通常のフロー内でのその位置が存在しなくなることです。図 2 に示すように:


図 2 黄色の背景レイヤーを絶対として配置した後、灰色の背景レイヤーが自動的に塗りつぶされることがわかります。

3. 相対と絶対の主な違い:

まず第一に、上記のように通常の流れの中での位置が存在するかどうかです。

第 2 に、相対的に配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的になります。図 3 に示すように:


図 3 図では、赤色の背景レイヤーは相対的に配置され、その直接の親要素の緑色の背景レイヤーはデフォルトで静的に配置されています。赤い背景レイヤーの位置は、緑色の背景レイヤーに対して上と左の 20 要素です。赤い背景レイヤーが絶対として配置されている場合、状況は図 4 に示されているようになります。要素は、絶対または相対的な黄色の背景レイヤーの配置方法に変更されます。したがって、絶対として配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーが必ずしも直接の親レイヤーであるとは限りません。親レイヤーで絶対または相対が定義されていない場合は、図 5 に示すように、ボディに対して相対的に配置されます。 margin 属性値の も上記の規則に準拠します。

以上がJavaScript を使用してナビゲーション バーのホバー効果を実現する方法に関するグラフィック コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。