实现导航联动效果

最新推荐文章于 2022-01-25 09:47:30 发布

Ylk_IT

最新推荐文章于 2022-01-25 09:47:30 发布

阅读量341

点赞数

本文链接：https://blog.csdn.net/Ylk_manong/article/details/118612920

版权

本文介绍了如何通过CSS和JavaScript来创建响应式的导航菜单联动效果，详细讲解了style, body及JavaScript代码段在实现过程中的作用和配置。" 118604704,11219177,TensorFlow深度学习实践：MNIST数据集的应用,"['深度学习', '计算机视觉', '神经网络', 'TensorFlow框架', '数据预处理']

摘要由CSDN通过智能技术生成

实现导航联动效果

style部分

<style>
        *{margin:0; padding:0;}
        li{list-style: none;}
        .header{
            height: 100px;
            background: #333;
        }
        .header_con{
            width: 1000px;
            margin: 0 auto;
            height: 100px;
            background: red;
        }
    
        .nav{
            height: 200px;
            background: #ccc;
        }
        .main .floor{
            height: 600px;
            border: 2px solid red;
            font-size: 30px;
        }
        .fix{
            width: 100px;
            position: fixed;
            right: 20px;
            top: 30%;
            border: 1px solid #333;
            background: greenyellow;
            /* display: none; */
            transform: scale(0);
            transition: all 1s linear;
            transform-origin: left top;
            cursor: pointer;
        }
        .fix li{
            height: 30px;
            line-height: 30px;
            width: 100px;
            text-align: center;
            border-bottom: 1px dashed #ccc;
        }
        .fix li.select{
            background: #ccc;

        }
    </style>

body部分

<div class="nav"></div>
    <div class="header"></div>
    <div class="main">
        <section class="floor">section1</section>
        <section class="floor">section2</section>
        <section class="floor">section3</section>
        <section class="floor">section4</section>
        <section class="floor">section5</section>
        <section class="floor">section6</section>
        <section class="floor">section7</section>
        <section class="floor">section8</section>
    </div>
    <ul class="fix">
        <li class="select">section1</li>
        <li>section2</li>
        <li>section3</li>
        <li>section4</li>
        <li>section5</li>
        <li>section6</li>
        <li>section7</li>
        <li>section8</li>
    </ul>

js部分

<script>
        var fix=document.querySelector('.fix');
        var sections=document.querySelectorAll('.main section');
        var lis=document.querySelectorAll('.fix li');
        console.log(sections);
        window.onscroll=function(){
            var scrollT=document.documentElement.scrollTop;
            if(scrollT>200){
                // fix.style.display="block";
                fix.style.transform="scale(1)";
            }else{
                // fix.style.display="none";
                fix.style.transform="scale(0)";
            }

            for(var i=0;i<sections.length;i++){
                if(scrollT>sections[i].offsetTop-150){
                    for(var j=0;j<sections.length;j++){
                        lis[j].classList.remove('select');
                    }
                    lis[i].classList.add('select');
                }
            }
        }

        lis.forEach(function(item,index){
            item.onclick=function(){
                var x=sections[index].offsetTop;
                console.log(x);
                document.documentElement.scrollTop=x-100;
            }
        })

        // 当浏览器窗口发生改变时触发的事件
        window.onresize=function(){
            console.log(123);
             var winW=document.documentElement.clientWidth;
             if(winW<700){
                fix.style.display="none";
             }else{
                fix.style.display="block";
             }
        }
   
        
    </script>