Question

我无法找到更好的标题来描述我的问题。

在单页网站上，我使用此脚本来检测用户正在阅读的位置并更新到菜单：

$(document).on("load scroll",function(e) {
  var scroll_top = $(document).scrollTop();
  var home = $('#home').position().top;
  var references = $('#references').position().top;
  var contact = $('#contact').position().top;
  if ( scroll_top < references || scroll_top == 0)
        {
            $('header nav a').removeClass('active');
            $('header nav a:first-of-type').addClass('active');
        } else if ( scroll_top > references && scroll_top < contact) {
            $('header nav a').removeClass('active');
            $('header nav a:nth-child(2)').addClass('active');
        } else if( scroll_top > contact) {
            $('header nav a').removeClass('active');
            $('header nav a:nth-child(3)').addClass('active');
        }
});

当用户点击导航中的某个链接时，会触发此事件：

$(function() {
  // scroll handler
  var scrollToAnchor = function( id ) {
    // grab the element to scroll to based on the name
    var elem = $("a[name='"+ id +"']");
    // if that didn't work, look for an element with our ID
    if ( typeof( elem.offset() ) === "undefined" ) {
      elem = $("#"+id);
    }
    // if the destination element exists
    if ( typeof( elem.offset() ) !== "undefined" ) {
      // do the scroll
      scroll_animate = false;
      $('html, body').animate({scrollTop:elem.offset().top}, {duration:1000});
      scroll_animate =  true;
    }
  };
  // bind to click event
  $("a").click(function( event ) {
    // only do this if it's an anchor link
    if ( $(this).attr("href").match("#") ) {
      // cancel default event propagation
      event.preventDefault();
      // scroll to the location
      var href = $(this).attr('href').replace('#', '')
      scrollToAnchor( href );
    }
  });
});

我的问题：当用户点击导航中的一个链接时，我不希望网站的行为与用户手动滚动一样。所以我不希望每个链接“在途中”获得类active，而只需要导航中的目标链接。

我尝试在单击链接时设置全局变量并将此条件添加到“on scroll”侦听器，但它不起作用。

中断jQuery（＆＃34;滚动＆＃34;）

0 个答案: