jQuery向下滾動浮動顯示導航菜單代碼



107 427 143



特效描述:向下滾動 浮動顯示導航,向下滾動導航顯示代碼

代碼結構

1. 引入JS

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

2. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" youdao="bind">
<style type="text/css">
    @charset "utf-8";
    body{height:1000px;}
    html{ overflow-x:hidden;}
    *{margin:0;padding:0;list-style-type:none;border:0;}
    table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
    h1{font-size:16px;} h2,h3,h4{font-size:12px;} h5,h6{font-size:12px;}
    a{ text-decoration:none; color:#333;cursor:pointer; outline:none;blr:expression(this.onFocus=this.blur());}
    img{display:block;}
    .clear{display:block;overflow:hidden;clear:both;height:0;line-height:0; font-size:0; width:100%;}
    body{font:12px/180% "微軟雅黑", Verdana, Lucida ,Helvetica,sans-serif; color:#333; background:#fff; position:relative; -webkit-text-size-adjust:none;}
    .Center{ width:980px; margin:0 auto;}
    .headtop{ width:100%; height:0px; background:#ae0024; position:fixed; left:0; top:0; z-index:1000; overflow:hidden;}
    .headtop .ulleft{ float:left; width:572px; height:39px; display:block;  margin-left:-15px;}
    .headtop .ulleft li{ float:left;}
    .headtop .ulleft li a{ width:138px; height:39px; display:block;}
    .headtop .ulright{ float:left;}
    .headtop .ulright li{ float:left;}
    .headtop .ulright li a{ display:block; height:39px; line-height:38px; font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#fff; font-weight:bold; text-transform:uppercase; padding:0 13px; letter-spacing:-1px;}
    .headtop .ulright li a:hover{ color:#ffdd00;}
</style>
<script>
    function headscroll(){
        var px=$(window).scrollTop();
        if(px>115){
            $(".headtop").stop().animate({height:39},500);
        }else{
            $(".headtop").stop().animate({height:0},500);
        }
    }
    $(window).scroll(function(){headscroll();});
</script>
<div class="headtop" style="overflow: hidden; height: 0px;">
    <div class="Center">
        <ul class="ulright">
            <li><a href=" ">關于我們</a></li>
            <li><a href=" ">愛的炫耀</a></li>
            <li><a href=" ">樣片展示</a></li>
            <li><a href=" ">新聞活動</a></li>
            <li><a href=" ">關于我們</a></li>
            <li><a href=" ">愛的炫耀</a></li>
            <li><a href=" ">樣片展示</a></li>
            <li><a href=" ">新聞活動</a></li>
            <li><a href=" ">愛的炫耀</a></li>
            <li><a href=" ">樣片展示</a></li>
            <li><a href=" ">新聞活動</a></li>
        </ul>
    </div>
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 浮動菜單 浮動導航
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子