您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
JS实现头部导航固定效果
点击数:74  发布时间2018-07-31 23:28:25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <style>
    *{padding:0;margin:0;}
    .header{height:80px;background:#f00;position:fixed;left:0px;top:0px;width:100%;transition: all 0.3s ease-out;}
    .bar{height:20px;background:#000}
    .banner{height:60px;background:#0f0;}
    .pt{height:1000px}

    .phone_menu{float: right;position: relative;top: 5px;width: 45px;height: 45px;cursor: pointer;}
.phone_menu em.p1{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:-6px; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p2{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:0; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p3{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:6px; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p1{ transform:rotate(0deg); margin-top:-7px;}
.phone_menu em.p2{ opacity:1;}
.phone_menu em.p3{ transform:rotate(0deg); margin-top:7px;}
.phone_menu:hover{border-radius: 5px;background: rgba(255,255,255,0.3);}
.phone_menu:hover em.p1 {
    transform: rotate(45deg);
    margin-top: 0;
}
.phone_menu:hover em.p2 {
    opacity: 0;
}
.phone_menu:hover em.p3 {
    transform: rotate(-45deg);
    margin-top: 0;
}
    </style>
</head>
<body>
    <div class="header">
        <div class="bar"></div>
        <div class="banner">
                <SPAN class="phone_menu"><EM class="p1"></EM><EM class="p2"></EM><EM class="p3"></EM></SPAN>

        </div>
    </div>
    <div class="pt">

        
    </div>

    <script>
    $(function(){
        $(window).scroll(function(){
            sc=$(window).scrollTop();
            if(sc>80){
                $(".header").css({"top":"-20px"})
            }else{
                $(".header").css({"top":"0px"})
            }
        })
    })
    </script>
</body>
</html>
来源:咸宁网站建设