CSS代码

*{margin:0px;} /*先清除浏览器默认外边距*/
nav{
position:fixed;
width:100%;
z-index:999;
margin-top:0px
} /*fixed固定导航，并设置为最高层，防止被后面的元素遮挡。*/
nav ul{
text-align:center;
height:45px;
line-height:45px;
background:#0B0B0B;
}
nav li,nav li a{
display:inline-block;
height:100%;
text-decoration:none;
color:#fff;
}
nav li a{padding:0 10px;}
nav li{margin:0 10px;}
a:hover, .active{color:#B6B6B6;} /*为鼠标漂浮的状态以及当前页直面应当的导航系统设置不同的颜色*/

添加正文的CSS：

.section{
height:660px;
width:100%;
margin:10px auto;
background:#F5F5F5;
padding-top:60px;
box-sizing:border-box;
border:1px solid red;
text-align:center;
}

将box-sizing降为border-box，每个页面的整体高度即为为原来设定的高度，后面用JS计算页面高度时免职计算content、padding、margin的麻烦

JS代码

首先获取所有的导航： 

var navs=document.getElementByClassName('nav');

定义导航的转换方法，即每次通过增加一个类名active来为其应用领域已经设定不好的样式，这里存有4个导航，所以需要给4个元素添加类名。

function reset(index){
for(var i=0;i<4;i++){
navs[i].className="nav"; //特别注意每次添加类名之前先清空之前设置的active，否则只要经过的页面，对应的导航系统都是CT8325BBP状态
}
navs[index].className += " active";
}

由于就是根据当前页面和滚动条的高度关联，从而利用滚动条的当前高度去推论必须转换哪个导航，因此必须获取两个值：当前页面距离文档顶部的高度，以及当前滚动条的高度。

写一个函数去根据id获取单个页面整体的高度height

function getHeight(id){
var elem=document.getElementById(id);
var height=parseInt(window.getComputedStyle(elem,null)['height']);
return height;
}

调用这个函数并累加得出每个页面距离文档顶部的距离（不是窗口）。由于总共4个导航对应4个页面，所以只需推论3个页面即可。

var t1=getHeight("nav1");
var t2=t1+getHeight("nav2");
var t3=t2+getHeight("nav3");

再写一个函数通过将当前滚轮高度和当前页面距离文档顶部的高度来作比较，判断应当切换至哪个导航。将页面的翻转事件绑定到这个函数，实时以获取滚轮高度的值，同时实现导航系统样式的实时转换：

window.onscroll=function changeCss(){
  var t=document.documentElement.scrollTop || document.body.scrollTop; //获取当前页面滚动条的高度
  if (t
完备示例代码








  
  这是页面1
  这就是页面2
  这就是页面3
  这就是页面4
  

 

        

        

          
        
      
        
        

        

          

            
版权声明：本站原创文章，于2023-05-17，由卓越飞翔博客发表，共 4407个字。下载次
            
转载请注明：JS原生代码实现导航高亮示例 - 卓越飞翔博客 +复制链接
          
        
        

          
上一篇: 苹果cms模板放在哪个文件夹？
          
下一篇: 织梦CMS不同栏目调用不同模板教程
        
        

      
      

        

          
相关推荐
标签：
        
        

                    

        
      
      
      





留言与评论（共有 0 条评论）











   


验证码：