将活动类添加到滚动点或ID以及点击上的菜单

Question

我试图让菜单项获得“活动”类不仅当他们被点击时，而且滚动到ID的ID的#main ，#features等。现在我有一些jquery添加了一个活动类，并在点击时将其从其他菜单项中移除，但只要滚动显然该菜单项处于活动状态，因为它只能在点击和不滚动点上工作。

<ul id="menu-main-menu" class="nav navbar-nav"> 
    <li class="menu-item"><a title="Home" href="#main">Home</a></li> 
    <li class="menu-item"><a title="Features" href="#features">Features</a></li> 
    <li class="menu-item"><a title="About" href="#about">About</a></li> 
    <li class="menu-item"><a title="Contact us" href="#fill">Contact us</a></li> 
</ul> 

我买的主题是使用stellar.js，我觉得这是创建滚动点JS：

jQuery('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { 

    var target = jQuery(this.hash); 
    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']'); 
    if (target.length) { 
     jQuery('html,body').animate({ 
      scrollTop: target.offset().top - 100 
     }, 1000); 
     return false; 
    } 
} 
}); 

我只需要这一个活跃的类添加到我的菜单，并从中删除其他项目，但也滚动点或目标ID。任何帮助，将不胜感激请:)

更新后的代码，我有玩，不能正常工作：

jQuery('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { 

    var target = jQuery(this.hash); 
    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']'); 
    if (target.length) { 
     jQuery('html,body').animate({ 
      scrollTop: target.offset().top - 100 
     }, 1000); 

     jQuery(".menu-item a").removeClass("active"); 

     target.addClass("active"); 
     target.hasClass("active").find(this).addClass("active"); 

     return false; 
    } 
} 
}); 

Answer 1

win.scroll(function(e){ 
    jQuery.each(items, function(key, value){ 
     var item = jQuery(value); 
     if(win.scrollTop() >= item.offset().top){ 
      jQuery('.menu-item a.active').removeClass('active'); 
      var id = item.attr('id'); 

      jQuery.each(navItems, function(key, value){ 
       var navItem = jQuery(value); 
       if(navItem.attr('href') == '#'+id) navItem.addClass('active'); 
      }); 
     } 
    }); 
}); 

对不起，我误解你的问题。我认为这是你在找什么： http://jsfiddle.net/pnsxg2zh/

所以基本上上滚动我得到窗口的滚动位置，然后用offset().top找到你想要滚动到元素的位置。我检查窗口的滚动位置是否是> =元素的顶部，如果是，我将活动类添加到具有等于该元素的id的导航项目。

Answer 2

因此，当单击菜单项并且元素（#main和其他）在屏幕上可见时，您需要添加“活动”类。

添加“积极”级上的点击，这样做：

jQuery('.menu-item').click(function(){ 
    jQuery('#menu-main-menu li').removeClass('active'); 
    jQuery(this).removeClass('menu-item').addClass('menu-item active'); 
}); 

检查元素的可见性，请阅读这篇文章

Check if element is visible after scrolling