1ページの水平スクロールウェブサイト - 現在のリンクをナビゲートできない

Question

私は大学のフェスティバルのためのウェブサイトを設計しています。これは1ページの水平スクロールウェブサイトです。ナビゲーションバーの現在のリンクを強調表示する方法を知りたい。これは繰り返しの質問のように見えるかもしれませんが、既存の回答のどれも私を助けませんでした。

これは私のコードのようです。

HTML：

<div id="container"> 
    <nav id="menubar"> 
     <div id="logo"><img src="img/logo.png"/></div> 
     <div id="bar"> 
      <span class="fest"><a href="#home">Home</a></span> 
      <span class="fest"><a href="#aboutUs">About Us</a></span> 
      <span class="fest"><a href="#events">Events</a></span> 
      <span class="fest"><a href="#schedule">Schedule</a></span> 
      <span class="fest"><a href="#gallery">Gallery</a></span>     
      <span class="fest"><a href="#people">People</a></span> 
      <span class="fest"><a href="#sponsors">Sponsors</a></span> 
      <span class="fest"><a href="#reachUs">Reach Us</a></span>    
     </div> 
    </nav> 
    <section id="home"></section> 
    <section id="aboutUs"></section> 
    <section id="events"></section> 
    //more 
</div> 

CSS：（のみ該当するもの）

body,html { 
    height: 100%; 
    margin:0; 
} 

#container { 
    height: 100%; 
    width: 800%; 
    margin: auto; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 
    font-size: 0; 
} 

#bar .fest a { 
    font-weight: normal; 
    font-size: 1.5vw; 
    color: black; 
    text-decoration: none; 
} 

はJQuery：

var aChildren = $("#bar .fest").children(); 
var aArray = []; 
for (var i=0; i < aChildren.length; i++) {  
    var aChild = aChildren[i]; 
    var ahref = $(aChild).attr('href'); 
    aArray.push(ahref); 
} 
$(window).scroll(function(){ 
    var windowPos = $(window).scrollLeft(); 
    for (var i=0; i < aArray.length; i++) { 
     var theID = aArray[i]; 
     var divPos = $(theID).offset().left; 
     var divWidth = $(theID).width(); 
     if (windowPos >= divPos && windowPos < (divPos + divWidth)) { 
      $("#bar .fest a[href='"+theID+"']").css("color","red"); 
     } else { 
      $("#bar .fest a[href='"+theID+"']").css("color","black"); 
     } 
    } 
}); 

これは、私はさまざまなソースから拾ったコードである（それがありませんうまくいかない）。間違いは何ですか？それは私が#container divでスクロールしていて、ボディではないという事実と関係がありますか？

Answer 1

このコードを試してください。

  var topMenu = $("#bar"), 
      topMenuHeight = topMenu.outerHeight()+15, 
      // All list items 
      menuItems = topMenu.find("a"), 
      // Anchors corresponding to menu items 
      scrollItems = menuItems.map(function(){ 
       var item = $($(this).attr("href")); 
       if (item.length) { return item; } 
      }); 

     // Bind to scroll 
     $(window).scroll(function(){ 
      // Get container scroll position 
      var fromTop = $(this).scrollTop()+topMenuHeight; 

      // Get id of current scroll item 
      var cur = scrollItems.map(function(){ 
      if ($(this).offset().top < fromTop) 
       return this; 
      }); 
      // Get the id of the current element 
      cur = cur[cur.length-1]; 
      var id = cur && cur.length ? cur[0].id : ""; 
      // Set/remove active class 
      menuItems 
      .parent().removeClass("active") 
      .end().filter("[href=#"+id+"]").parent().addClass("active"); 
     });