jquery - 根据部分的动画导航栏

Question

我有一个导航栏(顶部固定)，它有一个移动的“下划线栏”，而不仅仅是出现或消失。

它工作正常，但现在我希望根据当前部分(显示 div)在滚动时移动栏，但我无法移动“下划线栏”我只能让它显示/滚动时消失，不确定如何执行此操作。

这是我的导航栏 CSS:

        .menu {
          position: relative;
          width: 27em;
          height: 2em;
          margin: 100px auto;
          padding: 0;
          white-space: nowrap;
          margin-top:0px;
          margin-left:20px;
          float: right;
          display: none;
        }

        .menu li {
          display: inline;
          text-align: center;
        }

        .menu li a {
          position: relative;
          margin-top: 0;
          left: 0;
          height: 70px;
          right: 25em;
          margin-top: 10px;
          bottom: 0;
          display: inline-block;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          color: #6d6d6d;
          text-decoration: none;
          text-shadow: 0 1px 0 white;

          /*transition*/
          -webkit-transition: width .3s,right .3s;
          -moz-transition: width .3s,right .3s;
          -o-transition: width .3s,right .3s;
          transition: width .3s,right .3s;
        }

        .menu li:nth-child(1) a { width: 80px; }
        .menu li:nth-child(2) a { width: 80px; }
        .menu li:nth-child(3) a { width: 70px; }
        .menu li:nth-child(4) a { width: 120px; }
        .menu li:nth-child(5) a { width: 120px; }
        .menu li:nth-child(6) a { width: 150px; }


        .menu li:last-child a::after {
          content: "";
          position: absolute;
          right: inherit;
          bottom: -3px;
          width: inherit;
          height: 3px;
          background: transparent;
          pointer-events: none;
          /*transition*/
          -webkit-transition: all .5s ease;
          -moz-transition: all .5s ease;
          -o-transition: all .5s ease;
          transition: all .5s ease;
        }

        .menu li:nth-child(1) ~ li:last-child a {
          right: 561px;
          width: 55px;
        }

        .menu li:nth-child(2):hover ~ li:last-child a {
          right: 470px;
          width: 70px;
        }

        .menu li:nth-child(3):hover ~ li:last-child a {
          right: 393px;
          width: 60px;
        }

        .menu li:nth-child(4):hover ~ li:last-child a {
          right: 267px;
          width: 111px;
        }

        .menu li:nth-child(5):hover ~ li:last-child a {
          right: 139px;
          width: 115px;
        }

        .menu li:nth-child(6):last-child:hover a {
          right: 0px;
          width: 130px;
        }

        .menu li:hover ~ li:last-child a::after,
        .menu li:last-child:hover a::after { background: #00b9fc; }

        .menu li:last-child a {
          min-width: 130px;
          max-width: 130px;
        }
        a.active {
            font-size: 30px;
        }

        .menu li a:hover,
        .menu li a:focus {

          /*transition*/
          -webkit-transition: width .3s,right .3s,background-color .3s;
          -moz-transition: width .3s,right .3s,background-color .3s;
          -o-transition: width .3s,right .3s,background-color .3s;
          transition: width .3s,right .3s,background-color .3s;
        }
        a.active {
        some underline code
        }

这是有效的 js，但没有动画(栏只是出现和消失，而不是从每个导航栏单词移动):

        var sections = $('.section')
          , nav = $('.menu')
          , nav_height = nav.outerHeight();

        $(window).on('scroll', function () {
          var cur_pos = $(this).scrollTop();

          sections.each(function() {
            var top = $(this).offset().top - nav_height,
                bottom = top + $(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
              nav.find('a').removeClass('active');
              sections.removeClass('active');

              $(this).addClass('active');
              nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
            }
          });
        });

另外，html是这样的:

              <ul class="menu">
                <li class="submenu" style="border-right:2px solid #F5F5F5"><a class="js-scroll-trigger" href="#1"> word1</a></li>
                <li class="submenu" style="border-right:2px solid #F5F5F5"><a class="js-scroll-trigger" href="#2"> word2</a></li>
                <li class="submenu" style="border-right:2px solid #F5F5F5"><a class="js-scroll-trigger" href="#3"> word3</a></li>
                <li class="submenu" style="border-right:2px solid #F5F5F5"><a class="js-scroll-trigger" href="#4"> word4</a></li>
                <li class="submenu" style="border-right:2px solid #F5F5F5"><a class="js-scroll-trigger" href="#5"> word5</a></li>
                <li class="submenu"><a class="js-scroll-trigger" href="#6"> word6</a></li>
             </ul>

Answer 1

正如我在您的代码中看到的规则:

.menu li:nth-child(n):hover ~ li:last-child a { /*n is equal to the number of childs*/
   right: value;
   width: value;
}

做个把戏。一种方法是，将每个值存储在一个数组中，并在您在 scroll 事件中传递的回调中为它们设置动画