Question

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

我目前正在客户的网站上工作，并将其上传到我的Dropbox以获取此问题： 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>

Answer 1

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

在您的情况下，您可以设置<a href="#top">，目前有一个section和一个article具有相同的id，您应该删除其中一个，因为它是无效的html有多个具有相同id的元素，它可能会破坏事物。例如，将id保留在article：<article class="top area" id="top">上。在页面上包含ScrollSpy脚本并添加：

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

在激活功能$('nav li.active')中，您将获得当前有效的li，使用该信息可以找出移动箭头的位置，然后您可以运行平滑的滚动箭头代码将箭头移动到正确的位置。

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

导航菜单指示器 - 在悬停，单击和滚动时滑动

1 个答案: