js 实现菜单与内容的联动

最新推荐文章于 2024-07-22 17:44:20 发布

置顶当作看不见

最新推荐文章于 2024-07-22 17:44:20 发布

阅读量5.1k

点赞数 2

分类专栏： js 文章标签： js 菜单与内容

本文链接：https://blog.csdn.net/qq_29594393/article/details/80357033

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

菜单与内容联动

实现思路

 菜单是拥有点击事件 -->采用锚点跳到对应内容
 内容跳转到菜单 --> scroll 滚动事件 计算锚点的offset 和pageYoffset
 给对应菜单目录添加样式

2.实现

为了给不熟悉ES6语法读者更好的体验,代码全部都使用ES5

<!DOCTYPE html><html><head></head>
    <style>
        /*菜单容器样式,设置水平垂直居中,方便点击*/
        .menu{position: fixed;width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);}
        /*菜单样式*/
        [href]{display: inline-block;width: 40px;}
        /*内容的样式*/
        [name]{display: block;width: 300px;height: 400px;border-top: 5px solid salmon;}
        /*菜单高亮的样式*/
        .active{font-size: 32px;background-color: chartreuse;}
    </style>
    <body>
        <!--内容容器-->
        <div class="content"></div>
        <!--菜单容器-->
        <div class="menu"></div>        
    </body></html><script>
//初始化选择器,将获取到的element数组转化为数组对象
function $(selector){
    return Array.prototype.slice.call(document.querySelectorAll(selector))//支持css3的选择器
}
//创建内容和菜单的DOM
function createDom(attr){
    var html = '';
    var temp = attr=='href'?'#':'';
    for (var i=1;i<10;i++) {
        html+='<a '+attr+'="'+(temp+i)+'">'+i+'</a>';
    }
    return html;
}
$('.content')[0].innerHTML = createDom('name')
$('.menu')[0].innerHTML = createDom('href')

//获取内容的偏移量(相对于浏览器顶部)
var nameOffsets = $('[name]').map(function(v){
    return v.offsetTop
});

window.onscroll = function(e){
    //获取当前页面相对于浏览器顶部的偏移量
    var pageOffset = window.pageYOffset;
    var abs = Math.abs; //获取绝对值函数
    //查找离当前浏览器顶部的偏移量最近的菜单锚点.
    var nearHash =  nameOffsets.reduce(function(a,b){
        return abs(a-pageOffset)>abs(b-pageOffset)?b:a;
    })
    //获取菜单锚点
    var index = nameOffsets.indexOf(nearHash);
    //给菜单锚点添加 .active ,移除其他菜单元素的.active
    $('.active').forEach(function(v){
        v.className=''  
    })
    $('[href]')[index].className = 'active'
}
</script>