jQuery向下滚动浮动显示导航菜单代码



103 408 137



特效描述:向下滚动 浮动显示导航,向下滚动导航显示代码

代码结构

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

加群请备注:从官网了解到