网页定位导航特效--jQuery学习

来源：互联网发布：java汉化版编辑：程序博客网时间：2024/05/01 10:40

1.使用锚点进行导航

2.滚动条滚动时导航栏定位改变

1.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>地沟购物网</title>    <link rel="stylesheet" href="1.css" type="text/css">    <script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>    <script>        $(document).ready(function () {            //滚动条发生滚动            $(window).scroll(function () {                var top = $(window).scrollTop();                //console.log(top);                var menu = $("#menu");      //获取导航栏                var items = $("#content").find(".item");                var currentId = "";         //当前所在的楼层#id                items.each(function () {                    var m = $(this);                    var itemTop = m.offset().top;                    if(top>itemTop-200){                        currentId = "#"+m.attr("id");                    }else {//如果top值已小于当前itemTop，，必定小于后面的itemTop，可直接跳出                        return false;                    }                });                //给相应楼层的a设置class 为current，取消其他链接的current                var currentLink = menu.find(".current");                if(currentId && currentLink.attr("href") != currentId){                    currentLink.removeClass("current");                    menu.find("[href="+currentId+"]").addClass("current");                }            });        });    </script></head><body>    <div id="menu">        <ul>            <!--使用锚点链接进行定位-->            <li><a href="#item1" class="current">1F 男装</a></li>            <li><a href="#item2">2F 女装</a></li>            <li><a href="#item3">3F 美妆</a></li>            <li><a href="#item4">4F 数码</a></li>            <li><a href="#item5">5F 母婴</a></li>        </ul>    </div>    <div id="content">        <h1>地狗购物网</h1>        <div id="item1" class="item">            <h2>1F 男装</h2>            <ul>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>                <li><a href="#"><img src="1F.jpg" alt=""></a></li>            </ul>        </div>        <div id="item2" class="item">            <h2>2F 女装</h2>            <ul>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>                <li><a href="#"><img src="2F.jpg" alt=""></a></li>            </ul>        </div>        <div id="item3" class="item">            <h2>3F 美妆</h2>            <ul>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>                <li><a href="#"><img src="3F.jpg" alt=""></a></li>            </ul>        </div>        <div id="item4" class="item">            <h2>4F 数码</h2>            <ul>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>                <li><a href="#"><img src="4F.png" alt=""></a></li>            </ul>        </div>        <div id="item5" class="item">            <h2>5F 母婴</h2>            <ul>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>                <li><a href="#"><img src="5F.jpg" alt=""></a></li>            </ul>        </div>    </div></body></html>

1.css

*{    margin: 0;    padding:0;}body{    font-size:12px;    line-height: 1.7;}li{    list-style: none;}#content{    width: 800px;    margin: 0 auto;    padding: 20px;}#content h1{    color: #0088BB;}#content .item{    padding:20px;    margin-bottom: 20px;    border: 1px dotted #0088BB;}#content .item h2{    font-size: 16px;    font-weight: bold;    border-bottom: 2px solid #0088BB;    margin-bottom: 10px;}#content .item li{    display: inline;    margin-right: 10px;}#content .item li a img{    width:230px;    height:230px;    border: 0;}#menu{    position: fixed;    top:100px;    left:50%;    margin-left: 400px;    width:80px;}#menu ul li a{    display: block;    margin: 5px 0;    font-size: 14px;    font-weight:bold;    color: #333;    width:80px;    height: 50px;    line-height: 50px;    text-decoration: none;    text-align: center;}#menu ul li a:hover,#menu ul li a.current{    color: #FFF;    background: #0088bb;}

1 0