3

我从来没有在这里问过问题，但我已经使用了很多答案，所以我希望我希望达到的效果也能帮助其他希望达到同样效果的人。

我目前正在客户的网站上工作，并将其上传到我的保管箱以解决这个问题： http ://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html

它目前使用几个不同的脚本来实现以下目标：

（这个脚本在头部区域） 导航菜单是固定的，当你点击一个菜单链接时，页面会滚动到相关部分。当页面滚动到相关部分时（被点击后），一个类 (.act) 被添加到活动菜单链接中。当用户使用鼠标/触控板等在页面中上下滚动时，也会添加 .act 类。

（此脚本位于页面底部）导航栏链接还添加了另一个效果：当您将鼠标悬停在导航项目上时，导航菜单指示箭头（带有箭头背景图像的 div）滑过悬停的链接。

所以这就是我想要发生的事情

目前导航菜单指示箭头仅在悬停时滑动。我希望它在单击时滑动到活动链接并停留在那里，直到用户将鼠标悬停在另一个链接上。我当前的脚本有点问题，菜单指示器并不总是滑动到活动链接。

我还希望导航菜单指示箭头在用户滚动页面时滑动到活动链接。

这是可以实现的吗？

相关脚本

脚本 1 - 平滑滚动到部分并在滚动时激活“act”类：

<script type="text/javascript">
  jQuery(document).ready(function( $ ) {
    $('nav a').on('click', function() {
      var scrollAnchor = $(this).attr('data-scroll'),
      scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]')
        .offset().top + 1;
      $('body,html').animate({
        scrollTop: scrollPoint
      }, 500);
      return false;
    })

    $(window).scroll(function() {
      var windscroll = $(window).scrollTop();
      if (windscroll >= 100) {
        $('#wrap section').each(function(i) {
          if ($(this).position().top <= windscroll + 200) {
            $('nav a.act').removeClass('act');
            $('nav a').eq(i).addClass('act');
          }
        });
      } else {
        $('nav').removeClass('fixed');
        $('nav a.act').removeClass('act');
        $('nav a:first').addClass('act');
      }

    }).scroll();
  })
</script>

脚本 2 - 用于将主菜单指示器滑动到悬停和活动链接的位置

<script type="text/javascript">
$('#header')
  .css('position', 'relative')
  .append(
    $('<div>').attr('id', 'main-menu-indicator')
  )
  menuHover = function(which){

    if(which==null)
      which = $('ul#main-menu a.act')
    $('#main-menu-indicator')
      .stop(true, false)
      .animate({
        left: ($(which).offset().left - $('#header').offset().left +
          $(which).width()/2 + parseInt($(which).css('paddingLeft')) -
          $('#main-menu-indicator').width()/2 )
      }, 500)
  } 

$('ul#main-menu a')
  .hover(
    function(){
      menuHover(this)
    },
    function(){
      menuHover(null)
    }
  ) 
</script>
4

1 回答 1

1

您可以使用Bootstrap ScrollSpy来获得所需的效果，它可能比编写自己的解决方案更容易实现。activate您可以使用事件启动动画。

在您的情况下，您可以设置<a href="#top">，您当前有 asection和 an article，id您应该摆脱其中一个，因为拥有多个相同的元素是无效的 html id，并且可能会破坏事情。例如保持id在article:上<article class="top area" id="top">。在页面上包含 ScrollSpy 脚本并添加：

$('.header').scrollspy({activate: function() {
  // Add your logic here.
  }
});

在 activate 函数$('nav li.active')中将为您提供当前活动li的信息，使用该信息您应该能够计算出将箭头移动到哪里，然后您可以运行平滑滚动箭头代码将箭头移动到正确的位置。

现在 ScrollSpy 负责activate在用户滚动某处时调用，您可以通过将箭头移动到正确的位置来对此做出反应。

于 2013-04-23T01:36:43.677 回答