当前位置:首页 >> JavaScript>>正文

【jQuery练手项目】jQuery制作网页定位导航效果

栏目:JavaScript时间:2017-11-28热度:
本文标签: jQuery js 导航 定位

使用jQuery制作网页定位导航效果,点击右侧的导航链接滚动到相对于的板块,当滚动页面时,导航根据当前位置高亮。效果如下:


【jQuery练手项目】jQuery制作网页定位导航效果


分析:

1.点击导航滚动到相应位置用锚定位实现.

2.使用.scrollTop()判断当前的滚动条位置,根据比较每个板块的offsetTop来判断当前的位置,并让相应的导航链接高亮.


知识点:

1.  .scrollTop()

2.  .each()

3.  .find()  .find("a:eq(2)")  find("a").eq(2)


疑问:

.offset().top 与.offsetTop区别


样式:

    <style>
* {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: none;}
    #menu {position: fixed;top: 100px;left: 50%;margin-left: 400px;width: 50px;}
    #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;}
    * html, * html body {background-image: url(about:blank);background-attachment: fixed;}
    * html #menu {position: absolute;bottom: auto;top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');}
    </style>


网页元素:

<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>jquery网页定位导航效果</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.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="4F.jpg" 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>


js代码:

    <script>
$(document).ready(function(){
$(window).scroll(function(){
var top=$(window).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
//方法一:
items.each(function () {
    var m = $(this).index()-1;
    if (top - $(this).offset().top > -300) {
    menu.find("a").removeClass("current");
menu.find("a").eq(m).addClass("current");
    } 
else {
    return false;
    }
    });
//方法二:
/*
if(top-items[0].offsetTop > -300){
menu.find("a").removeClass("current");
menu.find("a:eq(0)").addClass("current");
}
if(top-items[1].offsetTop > -300){
menu.find("a").removeClass("current");
menu.find("a:eq(1)").addClass("current");
}
if(top-items[2].offsetTop > -300){
menu.find("a").removeClass("current");
menu.find("a:eq(2)").addClass("current");
}
if(top-items[3].offsetTop > -300){
menu.find("a").removeClass("current");
menu.find("a:eq(3)").addClass("current");
}
if(top-items[4].offsetTop > -300){
menu.find("a").removeClass("current");
menu.find("a:eq(4)").addClass("current");
}
else{}
*/
});
})
    </script>


效果演示


热门标签