<！DOCTYPE htmlののPUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLのxmlns = "HTTP ：//www.w3.org/1999/xhtml ">
<HEAD>
<META HTTP-当量=" Content-Typeの」コンテンツ= "text / htmlの;のcharset = UTF-8" />
<タイトル>随着滚动条滚动的タブ切换</ TITLE>
<スタイル>
* {
リストスタイル：なし。
マージン：0;
パディング：0;
テキスト装飾：なし;
フォントファミリ：「微軟雅黒」;
}
のLi {
幅：100pxに。
高さ：は50px;
行の高さ：は50px;
フロート：左;
ボーダー右：2ピクセル固体#eee。
テキスト整列：センター;
カーソル：ポインタ;
}
UL {
幅：1200px。
マージン：0自動;
}
.nav {
高さ：52px;
幅：100％;
背景：＃f5f5f5;
}
.nav .CUR {
背景：#FFF。
border-top：2ピクセル固体＃1 1a92cf。
色：＃1a92cf。
}
{.fixed
位置：固定。
トップ：0;
左：0;
}
{
色：＃505050。
}
</スタイル>
</ head>
<body>
<DIV CLASS = "NAV" ID = "NAV-コンテナ">
<ULクラス= "メニュー" ID = "NAV-ボックス"> `
<LIクラス= "CUR" >テキスト1-NAV <
</ div>
<DIV ID = "テキスト">
<divのスタイル= "幅：100％;高さ：500pxなど;背景：緑;テキスト整列：センター;">テキスト1 < / div>
<divのスタイル= "幅：100％;高さ：500pxなど;背景：黄色;テキスト整列：センター;">テキスト2 </ div>
<divのスタイル= "幅：100％;高さ：500pxなど;背景：ブルー;テキスト整列：センター; ">テキスト3 </ div>
</ div>
<スクリプト>
VAR navContainer =のdocument.getElementById（" NAV-コンテナ"）; //获取导航IDの
VAR navBox =のdocument.getElementById（" NAV -box "）; //获取UL的識別
VARテキスト=のdocument.getElementById（"テキスト"）; //获取滚动内容的識別
VAR navBoxChild = navBox.children。//ナビゲーションのULの数を取得
するvar textChild = text.childrenを; //コンテンツの取得数
のvar NUM = navContainer.offsetTopを、トップの高さの//ナビゲーション距離//コンテンツの数取得
//高ナビゲーション; VARのA = navContainer.offsetHeight
window.onscroll =関数（）{
VAR scrollTopスプライトdocument.documentElement.scrollTop || = || window.pageYOffset document.body.scrollTop;
IF（scrollTopスプライト> = NUM）{
document.getElementsByClassName（ 'MENU'）[ 0] .style.cssText = '位置：固定;トップ：0PX;背景：＃000;シャドウボックス- ：0 2ピクセル3px -1px＃000;';
}他{
document.getElementsByClassName（ 'MENU'）[0]。 = style.cssText '位置：静的;';
}
とき//対応する文書とナビゲーション接触が自動的に切り替えられ
法1を//
ため（VARのI = 0;私は<navBoxChild.lengthを、Iは++）{
IF（scrollTopスプライト+> = textChild [I] .offsetTop）{
J <navBoxChild.length; J ++）{（VARのJ = 0
= "" navBoxChild [J] .className。
}
navBoxChild [I] .className = "CUR"。
document.body.scrollTop / = 1.1;
}
}
}。
{（; iはnavBoxChild.lengthを<I ++がVAR I = 0）についての
VaRの間隔;
navBoxChild [i]は.INDEX = I。
navBoxChild [i]は.onclick =関数（）{
VAR自己=この;
clearInterval（間隔）。
間隔=のsetInterval（関数（）{
IF（document.body.scrollTop + <= textChild [self.index] .offsetTop）{
document.body.scrollTop + = 40;
IF（document.body.scrollTop + A> = textChild 【self.index] .offsetTop）{
document.body.scrollTop = textChild [self.index] .offsetTop - ;
てclearInterval（インターバル）;
}
}そう{
IF（document.body.scrollTop + <= textChild [self.index] .offsetTop）{
document.body.scrollTop = textChild [self.index] .offsetTop - 。
clearInterval（間隔）。
}
}
}、40）;
}。
}
</ SCRIPT>
</ body>
</ HTML>
固定ナビゲーション
VAR 0 =のdocument.getElementById（ "活性"）。
VARさh = o.offsetHeight。//高度
VARワット= o.offsetWidth。//宽度
にconsole.log（H）
document.addEventListener（ 'スクロール'、関数（イベント）{
VAR scrollDistance = window.pageYOffset || || document.documentElement.scrollTop document.body.scrollTop;
IF（scrollDistance> = H- 95）{//触发的位置
document.getElementsByClassName（ 'メニュー'）[0] .style.cssText =「位置：固定;上部：0PX;背景：＃000;ボックスシャドウ：0 2ピクセル3px -1px＃000。 ';
}他{
document.getElementsByClassName（'メニュー'）[0] .style.cssText = '位置：静的;';
}
}）。