网页定位导航效果---详解

废话不多说，先上图，查看效果！

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网页定位导航效果</title>
    <link rel="stylesheet" href="">
    <style>
        * {
            margin:0;
            padding:0;
        }
        body {
            font-size:12px;
            line-height:1.7;
        }
        li {
            list-style: none;
        }
        /*左侧样式*/
        #container {
            width: 828px;
            height: auto;
            margin: 0 auto;
            padding:20px;
        }
        #container h2 {
            color: #0088bb;
        }
        #container .item {
            padding: 20px;
            margin-bottom: 20px;
            border: 1px dotted #0088bb;
            text-align: center;
        }
        #container .item h2 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
            border-bottom: 2px solid #0088bb;
            text-align: left;
        }
        #container .item li {
            display:inline;
        }
        #container .item li a img {
            width:252px;
            height: 398px;
            border: none;
        }

        /*右侧导航样式*/
        #menu {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 414px;
        }
        #menu ul li a {
            display: block;
            width: 80px;
            text-align:center;
            font-size:14px;
            font-weight: 700;
            height: 30px;
            line-height: 30px;
            color: #333;
            margin-bottom: 10px;
            text-decoration: none;
        }
        #menu ul li a:hover, #menu ul li a.current {
            background: #0088bb;
            color: #fff;
        }
    </style>
    <!-- 引入jquery百度CDN库 -->
    <script type='text/javascript' src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
    <script>
        $(function () {
            /*滚动条事件监听*/
            //当滚动条发生滚动的时候，监听滚动条
            $(window).scroll(function () {
                //监听滚动条滚动的距离
                var sTop = $(window).scrollTop();
                //获取右侧导航操作
                var rMenu = $("#menu");
                //获取所有“楼层”
                var items = $("#container").find('.item');
                //判断每一层楼的高度{计算每个Item距离窗口顶部的绝对高度}
                var curId = '';
                items.each(function (i) {
                    var _this = $(this);
                    var itemTop = _this.offset().top;
                    if (sTop > itemTop-160) {
                        curId = '#'+_this.attr('id');
                    } else {
                        return false;
                    }
                })
                // console.log(curId);
                curId = curId == '' ? '#item1' : curId;
                //如果到达对应楼层，那么样式.current转变到该对应导航，并且其他导航删除.current
                rMenu.find('a').removeClass('current').parents('ul').find("a[href='"+curId+"']").addClass('current');
            })
        })
    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li class="item"><a href="#item1" class='current'>1F 男装</a></li>
            <li class="item"><a href="#item2">2F 女装</a></li>
            <li class="item"><a href="#item3">3F 童装</a></li>
            <li class="item"><a href="#item4">4F 运动</a></li>
            <li class="item"><a href="#item5">5F 电器</a></li>
        </ul>
    </div>
    <div id="container">
        <h1>地沟油购物网</h1>
        <div id="item1" class="item">
            <h2>1F 男装</h2>
            <ul>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
                <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li>
            </ul>
        </div>
        <div id="item2" class="item">
            <h2>2F 女装</h2>
            <ul>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
                <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li>
            </ul>
        </div>
        <div id="item3" class="item">
            <h2>3F 童装装</h2>
            <ul>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
                <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li>
            </ul>
        </div>
        <div id="item4" class="item">
            <h2>4F 运动</h2>
            <ul>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
                <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li>
            </ul>
        </div>
        <div id="item5" class="item">
            <h2>5F 电器</h2>
            <ul>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
                <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li>
            </ul>
        </div>

    </div>
</body>
</html>

指点迷津：

运用css和jQuery，实现导航菜单在右侧绝对定位显示，并且可以在滚动时根据滚动条的位置自动设置导航菜单的焦点。

温馨提示 : 完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、静态网页的实现

1.运用CSS，让导航菜单在右侧绝对定位显示。

2.运用锚点，实现导航定位。

提示: 使用position属性。

二、jQuery实现定位导航特效

1.滚动条发生滚动时，要获取相应的值。

提示:先要获取到相应的scrollTop()、导航和当前所在的楼层。

2.实现让导航菜单在滚动条滚动的时候自动设置焦点

提示：这里遍历时需要对滚动条位置和每个元素位置做一个判断，并把相应的元素id值赋予currentId

3. 给相应楼层的 a 设置current，取消其他链接的current

posted @ 2014-08-18 14:19 Zell~Dincht 阅读(227) 评论(0) 编辑收藏举报

刷新页面返回顶部

网页定位导航效果---详解

任务

公告