滚动监听滚屏与菜单联动

最新推荐文章于 2024-04-28 15:42:08 发布

明星_驴

最新推荐文章于 2024-04-28 15:42:08 发布

阅读量480

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/lvxiaodi1234/article/details/46908877

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
<style>
ul,ol,li{
   list-style-type: none;
   padding: 0;
   margin: 0;
}
.module{
   width: 100%;
   height: 900px;
}
.menu{
   width: 96px;
   height: 236px;
   border: 1px solid #cccccc;
   background-color: #ffffff;
   position: fixed;
   top: 150px;
   right: 50%;
   margin-right:-600px;
   z-index: 3;
}
.menu li{
   width: 96px;
   height: 48px;
   color:#8684ad;
   font-family: "微软雅黑";
   font-size: 18px;
   line-height: 48px;
   text-align: center;
   cursor: pointer;
}
.menu li.active{
   background-color: #84e5eb;
   color: #ffffff;
   font-weight: bold;
}
</style>
<script src="http://img3.cache.netease.com/utf8/assets/js/jquery-1.10.2.min.js"></script>
</head>
<body>
   <div class="module" style="background-color:#28004d"></div>
   <div class="module" style="background-color:#4b0091"></div>
   <div class="module" style="background-color:#6f00d2"></div>
   <div class="module" style="background-color:#921aff"></div>
   <div class="module" style="background-color:#b15bff"></div>
   <ul class="menu">
       <li class="active">第一帧</li>
       <li>第二帧</li>
       <li>第三帧</li>
       <li>第四帧</li>
       <li>第五帧</li>
   </ul>
</body>
<script>
    var modules = $(".module");
    var menu_li = $(".menu").find("li");

    var screnn_scroll = function(modules, menu_li, scroll_config) {
       var modules_scrollTop = modules.map(function() {
           return $(this).offset().top;
       }).get();

       var scroll_menu = function() {
           for (var i = 0; i < modules_scrollTop.length; i++) {
               if ($(window).scrollTop() <= modules_scrollTop[0]) {
                   menu_li.eq(0).addClass(scroll_config.active_className).siblings().removeClass(scroll_config.active_className);
               } else if ($(window).scrollTop() < modules_scrollTop[i] && $(window).scrollTop() > modules_scrollTop[i - 1]) {
                   menu_li.eq(i).addClass(scroll_config.active_className).siblings().removeClass(scroll_config.active_className);
               } else if ($(window).scrollTop() > modules_scrollTop[i]) {
                   menu_li.eq(i).addClass(scroll_config.active_className).siblings().removeClass(scroll_config.active_className);
               }
           }
       };

       var to_scrollposition = function(this_btn, tar_position) {
           $(window).off("scroll", scroll_menu);
           this_btn.addClass(scroll_config.active_className).siblings().removeClass(scroll_config.active_className);
           $("html,body").animate({
               scrollTop: (tar_position.offset().top - scroll_config.offset_top)
           }, scroll_config.scroll_timeDelay, function() {
               $(window).on("scroll", scroll_menu);
           });
       };

       var init = function() {
           $(window).scrollTop(0);
           $(window).on("scroll", scroll_menu);

           menu_li.on("click", function() {
               var index = $(this).index();
               to_scrollposition($(this), modules.eq(index));
           })
       };

       init();
    }

    var scroll_config = {
       offset_top: 46, //调整距离顶端额外偏移量
       scroll_timeDelay: 300, //滚动时长
       active_className: "active" //当前点亮menu项类名
    }

    screnn_scroll(modules, menu_li, scroll_config);
</script>
</html>