JS之简单导航栏动画

冷不防 2022-05-10 00:33 249阅读 0赞

> 实现思路：通过js动态添加css和删除css以及设置过渡时间

### 1:index.html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>手机</title>
      	<link rel="stylesheet" href="css/header.css" />
    </head>
    <body>
    
    
    <header class="header" id="header">
        <div class="header_wrap">
            <div class="header_logo">我的手机</div>
            <nav class="header_nav">
                <a href="javascript:void(0)" class="header_nav-item ">首页</a>
                <a href="javascript:void(0)" class="header_nav-item">外观</a>
                <a href="javascript:void(0)" class="header_nav-item">配置</a>
                <a href="javascript:void(0)" class="header_nav-item">型号</a>
                <a href="javascript:void(0)" class="header_nav-item header_nav-item_custom_button">说明</a>
            </nav>
        </div>
    
    </header>
    
    <div style="height: 1000px"></div>
    <script type="text/javascript">
    	window.onscroll=function(){
    		var top=document.documentElement.scrollTop;
    		var heade=document.getElementById("header");
    		var items=document.getElementsByClassName("header_nav-item");//获取全部的eader_nav-item
    		// 通过JS为heade和全部的item加上和去除样式
    		if(top>70){//加上的样式
    		   heade.classList.add("header_status_black");
    		   for (var i = 0; i < items.length; i++) {
    		   	items[i].classList.add("item_color"); 
    		   }
    		}else{//清除加上的样式
    		   heade.classList.remove("header_status_black");  
    		    for (var i = 0; i < items.length; i++) {
    		   	items[i].classList.remove("item_color"); 
    		   }
    		}
    	}
    </script>
    </body>
    
    </html>

### 2：header.css ###

/*!*BEM设计模式*!*/
    /*模块：没有前缀，多个单词用-链接*/
    /*元素：元素在模块之后，可以有多个层级，以_链接*/
    /*修饰：某元素或者模块的特别的状态，必须有一个状态名和状态值，用_链接*/
    
    body,h2,h3{
        padding: 0;
        margin: 0;
        font-size: 12px;
        font-family:"Songti SC";
    }
    a{
        text-decoration: none;
    }
    
    /*导航头*/
    .header{
        background-color: #f7f7f7f7;
        border: 1px solid red;
    }
    
    .header_wrap{
        height: 80px;
        width: 1200px;
        position: relative;
        border: 1px solid red;
        margin: 0 auto;
    }
    .header_logo{
        border: 1px solid red;
        width: 150px;
        height: 38px;
        line-height: 38px;
        text-indent: 50px;
        font-size: 20px;
        color: #07111b;
        background: url("../img/logo.png") left center no-repeat;
        position: absolute;
        top: 50%;
        margin-top: -19px;
        left: 20px;
    }
    .header_nav{
        position: absolute;
        right: 20px;
        height: 38px;
        line-height: 38px;
        top: 50%;
        margin-top: -19px;
    }
    
    .header_nav-item{
        color: #292f35;
        font-size: 14px;
        display: block;
        height: 38px;
        width: 60px;
        float: left;
        margin-left: 40px;
        text-align: center;
    }
    
    .header_nav-item_custom_button{
        background-color: #000;
        color: #f4f4f5;
        text-align: center;
        width:60px;
        border-radius: 3px;
    }
    
    /*动画----------------------------------------------*/
    /*此样式通过js加载到.header+.header_status_black 上*/
    .header_status_black{
    	/*添加动画过渡时间*/
        transition: all 1s;
        background-color: rgba(0,0,0,.5);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index:3; 
     }
     /*此样式通过js加载到.header_nav-item+.item_color上*/
     .item_color{
     	/*添加动画过渡时间*/
     	transition: all 2s;
     	color: #F4F4F5;
     	font-size: 17px;
     }

### 3:效果图 ###

### ![70][] ###

> 导航条下拉，变黑，字体变大，有过渡时间

![70 1][]

[70]: /images/20220510/4cbfb923d0604d128cec0a0299e8e48a.png
[70 1]: /images/20220510/136dd0cbb60a4b0683dd5a5daec2a0d7.png