幽灵菜单介绍；

2024年1月31日 173次阅读 来源: 骚胖

以往我们都是鼠标悬停才出现的幽灵菜单；今天给大家介绍一个滚动的幽灵菜单

滚动的幽灵菜单

1.html 随便设置
代码如下：
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>表格</title>
<link rel=”stylesheet” href=”css/font-awesome.min.css” type=”text/css”>
<style>
*{margin:0;padding: 0;}
body{

height: 2000px;

}
.shou{

    width: 100%;
    height: 48px;
    border-bottom: 2px solid red;
    background:url(images/1.png) no-repeat 50px;
    position: absolute;
    top:0;
    left: 0;


}
.lai input{
    width: 350px;
    height: 35px;
    color: rgb(153, 153, 153);
    border:none;
    outline:none;
    letter-spacing: normal;
    word-spacing: normal;
    background-color: #efefef;
}

.lai{
    height: 35px;
    width: 400px;
    margin:0 auto;
    margin-top:5px;
    background-color: red;
    position: relative;
}
.lai span{
    position: absolute;
    right: 65px;
    top: 7px;
    color: rgb(153, 153, 153);
}
.lai>i{
    margin-left: 10px; 
    font-size: 20px;
font-weight: 700;
color: #fff;

}
.ki{
    height: 55px;
    width: 100%;
}

</style>
</head>
<body>
<div class=”ki”></div>

<div class="shou">
    <div class="lai">
        <input type="" placeholder="请输入你需要的产品" value="" >
         <span><i class="fa fa-camera"></i></span>
         <i class="fa fa-search"></i>
    </div>
</div>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>

jQuery部分


<script type="text/javascript">
    function hai() {
        var lai = document.documentElement.scrollTop;
        if(lai>300){
            $(".shou").animate({"top":lai},500).show();

        }else{
            $(".shou").hide();
        }
            }

        var timer=null;
        var lastTime=new Date().getTime();
        
        var isIe6-navigator.userAgent.indexOf("MSIE 6.0") > 0;
        window.onscroll=function(){
            if(isIe6)
            {
                return false
            }
        }
        
        var timr=null;
        var lastTime=new Date().getTime();
        window.onscroll=function(){
            var st=document.documentElement.scrollTop;
            if(st>300){

            if(!isIe6)
            {
                clearTimeout(timer);
                    timer=setTimeout(function(){
                        $(".shou").removeClass("fixed");
                        $(".shou").show().animate({"top":st},100);

                },100);
            }else{
                $(".shou").show()
            }
            
            }else{
                $(".show").hide();
            }
</script>

</body>
</html>

    原文作者：骚胖
    原文地址: https://segmentfault.com/a/1190000012066009
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞