导航栏菜单项随滚轮滚动，样式发生变化

最新推荐文章于 2024-02-23 17:01:58 发布

roury

最新推荐文章于 2024-02-23 17:01:58 发布

阅读量4.5k

点赞数 2

分类专栏：零碎知识点小功能文章标签：滚轮事件导航像

本文链接：https://blog.csdn.net/roury/article/details/84257091

版权

小功能同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

零碎知识点

9 篇文章 1 订阅

订阅专栏

一、实现功能：通过滚轮事件，是导航条上的菜单样式与正文相对应

二、效果如下：

在这里插入图片描述

三、功能实现

理论：通过比较第i个元素的偏移量与滚轮偏移量，和第i+1个元素的偏移量与滚轮偏移量的大小，判断第i个元素是否为当前被选择元素，是，循环终止
ps：第i个元素的偏移量和第i+1个元素的偏移量在滚轮事件中是相对于父容器的，在其他时候是相对于根容器，不知道为什么
在这里插入图片描述

html部分

<body>
    <header>把第一个顶上下吧！！！</header>
    <!-- 导航条 -->
    <div class="page-name-nav">
        <ul class="name-nav-ul">
        <li class="name-nav-li-1 nav-word-on"><a href="#" class="name-nav-word ">曹操</a></li>
        <li class="name-nav-li-2"><a href="#" class="name-nav-word">司马懿</a></li>
        <li class="name-nav-li-3"><a href="#" class="name-nav-word">刘备</a></li>
        <li class="name-nav-li-4"><a href="#" class="name-nav-word">诸葛亮</a></li>
        <li class="name-nav-li-5"><a href="#" class="name-nav-word">孙权</a></li>
        <li class="name-nav-li-6"><a href="#" class="name-nav-word">周瑜</a></li>
        </ul>
    </div>
    <!-- 正文 -->
    <div class="introduce-nav">
        <ul class="introduce-nav-ul">
            <li class="introduce-nav-li-1">大量文字以便形成滚轮事件，下同</li>
            <li class="introduce-nav-li-2"></li>
            <li class="introduce-nav-li-3"></li>
            <li class="introduce-nav-li-4"></li>
            <li class="introduce-nav-li-5"></li>
            <li class="introduce-nav-li-6"></li>
        </ul>
    </div>
    <footer >把最后一个顶上去吧！！！</footer>
</body>

js部分

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        // 测试$("#id").offset().top 
        // var hhh = $(".introduce-nav-li-1").offset().top;
        // alert(hhh);
        $(window).scroll(function () {
            var $nav = $(".introduce-nav ul li"),
                length = $nav.length,//获取导航菜单 ul li 的个数
                item = new Array(),//新建一个数组
                sTop = $(window).scrollTop();//获取滚动条偏移的高度
            for ( i = 1; i <= length; i++) {
                item[i]=$(".introduce-nav-li-"+i).offset().top;//相对父元素偏移的高度
                if($(".introduce-nav-li-"+(i+1)).offset()){//是否最后一个元素
                    item[i+1]=$(".introduce-nav-li-"+(i+1)).offset().top;
                    if(item[i+1] >sTop&&sTop>=item[i] ){//是否在第i个元素与第i+1个元素之间
                        // 第i个元素添加被选择样式，其他同级元素移除被选择样式
                        $(".name-nav-li-"+i).addClass("nav-word-on").siblings("li").removeClass("nav-word-on");
                        break;
                    }
                    else if(sTop<item[i] ){//在第一个元素之上
                        $(".name-nav-li-"+i).parent().children("li").removeClass("nav-word-on");
                        break;
                    }
                }
                else{
                    if(sTop>(item[i] +$(".introduce-nav-li-"+i).height())){//在最后一个元素之下
                        $(".name-nav-li-"+i).parent().children("li").removeClass("nav-word-on");
                    }
                    else{//最后一个元素
                        $(".name-nav-li-"+i).addClass("nav-word-on").siblings("li").removeClass("nav-word-on");
                    }
                } 
            }
        })
    })
</script>