在文档页面局部出现导航随内容滚动高亮显示效果 

<!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>在文档页面局部出现导航随内容滚动高亮显示效果</title>  
<style>  
*{  
    list-style:none;  
    margin:0;  
    padding:0;  
    text-decoration:none;  
    font-family:'Microsoft YaHei';  
  
}
html{
    height: 100%;
    overflow: hidden;
} 
.x_mg_xlcd #text {
    width: 70%;
    padding: 0!important;
    height: 700px;
    overflow: auto;
} 
.x_mg_xlcd li{  
    width:100px;  
    height:50px;  
    line-height:50px;  
    border-right:2px solid #eee;  
    text-align:center;  
    cursor:pointer;  
}  
   
.x_mg_xlcd .gd_nav .cur{  
    font-size: 22px;  
}  
.x_mg_xlcd .gd_nav{  
    position:fixed;  
    top:0;  
    right:0;
}  
.x_mg_xlcd #text{width: 70%;padding:0!important;}
.x_mg_xlcd #text .box{
    width: 100%;height: 500px;background: pink;border-bottom: 3px solid blue}  
</style>  
</head>  
<body>  
 
<div class="x_mg_xlcd">
    <div class="gd_nav" id="nav-container">  
        <ul id="nav-box"> 
            <li class="cur"><a href="#x_a">A</a></li>  
            <li><a href="#x_b">B</a></li>  
            <li><a href="#x_c">C</a></li>  
            <li><a href="#x_d">D</a></li>  
            <li><a href="#x_e">E</a></li>  
        </ul>  
    </div>  
    <div id="text">  
        <div id="x_a" class="box">A</div>  
        <div id="x_b" class="box">B</div>  
        <div id="x_c" class="box" >C</div>   
        <div id="x_d" class="box">D</div>   
        <div id="x_e" class="box">E</div>   
    </div>
</div>  

  
<script>  
var navContainer = document.getElementById("nav-container");  
var navBox = document.getElementById("nav-box");  
var text = document.getElementById("text");  
var navBoxChild = navBox.children;  
var textChild = text.children;  
var num = navContainer.offsetTop;  
var a = navContainer.offsetHeight;  
document.getElementById("text").onmousewheel = function(event) {
    var scrollTop = document.getElementById("text").scrollTop;  
    if(scrollTop >= num){  
        navContainer.className = "gd_nav";  
        text.style.paddingTop = a +"px";  
    }else{  
        navContainer.className = "gd_nav";  
        text.style.paddingTop = "";  
    }  
    //当导航与相应文档接触的时候自动切换  
    //method1  
    for(var i=0;i<navBoxChild.length;i++){  
        if( scrollTop + a >= textChild[i].offsetTop){  
            for(var j=0;j<navBoxChild.length;j++){  
                navBoxChild[j].className = "";  
            }  
            navBoxChild[i].className = "cur";  
       }  
    }  
};  
for(var i=0;i<navBoxChild.length;i++){  
    var interval;  
    navBoxChild[i].index = i;  
    navBoxChild[i].onclick = function(){  
        var self = this;  
        clearInterval(interval);  
        interval = setInterval(function(){  
            if(document.getElementById("text").scrollTop + a<=textChild[self.index].offsetTop){  
                document.getElementById("text").scrollTop += 40;  
                if(document.getElementById("text").scrollTop + a>=textChild[self.index].offsetTop){  
                    document.getElementById("text").scrollTop = textChild[self.index].offsetTop-a;  
                    clearInterval(interval);  
                }  
            }else{  
                document.getElementById("text").scrollTop /= 1.1;  
                if(document.getElementById("text").scrollTop + a<=textChild[self.index].offsetTop){  
                    document.getElementById("text").scrollTop = textChild[self.index].offsetTop-a;  
                    clearInterval(interval);  
                }  
            }  
        },40);  
    };  
}  
</script>    
</body>  
</html>

 

posted @ 2017-07-19 15:33  夏小夏吖  阅读(312)  评论(0)  编辑  收藏  举报