使用jQuery实现网页定位导航

最新推荐文章于 2023-11-10 17:41:46 发布

左岸16

最新推荐文章于 2023-11-10 17:41:46 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/Phoebe_16/article/details/51926899

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery创建导航条并实现页面滚动时导航对应内容高亮。讲解了利用CSS布局和jQuery的offset()及scrollTop()方法来实现滚动同步效果，同时针对IE6的兼容性问题进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如今网上购物对人们来说已经是家常便饭了，越来越多的网上商城也更注重用户体验，这篇文章就以天猫这样的购物商城为例子，教你如何编写代码实现网页定位导航。由于博主资质尚浅，所以只能分享我学习的一点基础，大家多多提出建议！
首先就是要实现表现和形式的分离，我们根据导航的样式设计一个导航菜单和每个部分导航条对应的商品展示，这里我只简单利用几张相同的图片来实现效果。

1.导航条的设计
这里采用class=”current”表示默认初始状态1F是选中状态，会显示高亮。此处涉及到锚点的使用，可以迅速定位到相应位置。
<li><a href="#item1" class="current">1F</a></li>

<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>

2.不同购物楼层产品的展示，只要写了一个部分，剩下的都是类似的原理。所有的楼层都用了同样的class样式，方便CSS样式的实现。

<div id="item1" class="item">

这里使用id=”item1”而不是name=”item1”,因为HTML5取消了name的使用，统一使用id进行锚点链接的设置。

        <div id="content">
            <h1>定位导航的使用</h1>
            <div id="item1" class="item">
                <h2>1F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225549981" alt=""/></a></li>
                </ul>
            </div>
            <div id="item2" class="item">
                <h2>2F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225454230" alt=""/></a></li>
                </ul>
            </div>
            <div id="item3" class="item">
                <h2>3F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225357989" alt=""/></a></li>
                </ul>
            </div>
            <div id="item4" class="item">
                <h2>4F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225245899" alt=""/></a></li>
                </ul>
            </div>
            <div id="item5" class="item">
                <h2>5F</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                    <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20160716225033349" alt=""/></a></li>
                </ul>
            </div>
        </div>

接下来就是利用CSS实现页面的样式设计，这里不做详细介绍，大家可以学习CSS网页布局基础就可以理解以下代码。

<style type="text/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:#08b;
            }

            #content .item{
                padding:20px;margin-bottom:20px;border:1px dotted #08b;
            }

            #content .item h2{
                font-size:16px;font-weight: bold;border-bottom:2px solid #086;margin-bottom:10px;
            }

            #content .item li{display:inline;margin-right:10px;}

            #content .item li a img{
                width:230px;height:230px;border:none;
            }

            #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;width:80px;height:50px;line-height:50px;text-decoration: none;color:#333;text-align: center;
            }

            #menu ul li a:hover,#menu ul li a.current{
                color:#fff;background:#08b;
            }
        </style>

这里重点讲解以上代码中的一个重要精髓，满满的都是套路。

#menu{
                position:fixed;top:100px;left:50%;margin-left:400px;width:80px;
            }

这段代码实现了导航菜单固定在右侧，left:50%;margin-left:400px;原理是先使菜单居中，然后再根据外部content设置左边距，这里设置的400px刚好是content部分宽度的一半，所以巧妙地实现了导航菜单固定在右侧的效果。

接下来我们要使用jQuery来实现滑动滚动条时，左边栏目与导航相对应的效果。当然，首先要引入jquery.min.js。然后分别获取滚动条滚动的位置和每个楼层相对页面顶部的距离，这里用到jQuery中的两个知识点，offset()获取匹配元素的相对位移，返回包含top属性和left属性的一个对象；scrollTop(val)可以获取或者设置匹配元素相对滚动条顶部的偏移。具体实现如下：

<script>
            $(document).ready(function(){
                $(window).scroll(function(){
                    var menu=$("#menu");
                    var items=$("#content").find(".item");/*这里也可以写成$("content .item")或者$(".item"),但相比之下效率就不那么高了，因为id是唯一的，通过id查找的效率因此就高一点*/
                    var top=$(document).scrollTop();
                    var currentId="";
                    items.each(function(){
                        var m=$(this);
                        var itemTop=m.offset().top;
                        if(top>itemTop-200){/*当大部分内容出现时，导航条焦点就会跳到相应位置，增强了用户体验*/
                            currentId="#"+m.attr("id");
                        }
                        else{
                            return false;
                        }
                    });
                    var currentLink=menu.find(".current");
                    if(currentId && currentLink.attr("href")!=currentId){
                        currentLink.removeClass("current");
                        menu.find("[href='"+currentId+"']").addClass("current");
                    }
/*这里特别注意引号的书写，刚开始我少写了一对引号，一直不成功，修改之后才成功了。不过这个引号的使用原理我还不清楚，明白的小伙伴们可以留言告诉我哟！*/                    
                });
            });
        </script>

对于IE6版本的浏览器，我们要考虑兼容性问题，上面CSS设计中固定定位fixed在IE6中是不支持的，所以要使用到特殊的工具hack。

*html #menu{
position:absolute;
top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
}

还要解决IE6闪烁跳变的问题，我们可以通过设置一个空图片来解决

 *html,*html body{
 background-image:url(about:blank);
 background-attachment:fixed;
 }

页面的一小部分简单截图，大家可以自己打一下代码看看效果
写到这里就差不多大功告成了，博主实现的知识很简陋的页面，希望大家多多包涵，有什么纰漏欢迎大家指正！
下一节，博主将分享通过原生JavaScript来实现同样的效果！