JS导航随动 导航跟随

admin12年前分享639
直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript - 窗口滚动跟随的效果</title>
</head>
<body>
<div id="wrapper" style="width:960px; margin:0 auto">
    <div id="header" style="height:200px"><h1>this is header...</h1></div>
    <!-- 除了 id="left" style="position:relative; top:0" ,其他的都只是摆设 -->
    <div id="secondary_content" style="float:left; width:190px; background:#DDD; border:2px solid #660000; position:relative; top:0;">
        <h3>secondary content...</h3><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
    </div>
    <div id="main_content" style="float:right; width:750px; background:#DDD; height:10000px"><h2>this is main content...</h2></div>
</div>
</body>
</html>
<script type="text/javascript"><!--
//获取对象的初始位置
var t = document.getElementById('secondary_content').offsetTop;
window.onscroll = function() {
    //IE与Mozilla为前者,Chrome取后者的值
    var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
    //滚动时分两种情况考虑,再赋值
    document.getElementById('secondary_content').style.top = scroll_top > t ? scroll_top - t + 'px' : 0;
}
// --></script>
切记,JS必须在DIV后边。
aaaaaaaa

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。