滚动页面的实现头部缩放-并使用过度看着不那么生硬

JS脚本

//头部特效脚本开始===================================================
$(window).scroll(function (){
    headerInit();
});

function headerInit (){
    if($(this).scrollTop()>0){
        $("body").addClass("fiexed-header-on");                  //在body上添加一个样式“fiexed-header-on”就相当于body了  
}else{ $("body").removeClass("fiexed-header-on"); } } 
headerInit(); //头部特效脚本结束====================================================

CSS样式

/*特效开始******************************************/
.fiexed-header-on header{                                        //头部中的header元素
    height: 70px;
    background-color: rgba(0,0,0,0.95);
}
.fiexed-header-on .bigContain{
    font-size:24px;

    transition: all 0.3s ease-in-out;
}
.fiexed-header-on .log{
    transform: scale(0.8);
}
.fiexed-header-on .bigContain.smallContain{
    margin-left:5px;
}
.fiexed-header-on .col-md-8{
    margin-top:5px;
}
/*头部样式==结束========================================================================================*/

 

这样滚动的话太生硬，需要设置下过度

.bigContain{
    font-size:36px;
    transition: all 0.3s ease-in-out;  
}

transition：所有属性 0.3秒  浅进浅出；

　　

 

转载于:https://www.cnblogs.com/xiaowie/p/9854787.html