單頁水平滾動網站 - 無法突出顯示導航欄上的當前鏈接

我正在爲我的大學巨星設計一個網站。這是一個單頁水平滾動網站。我想知道如何突出顯示導航欄上的當前鏈接。這可能看起來像一個重複的問題，但現有的答案都沒有幫助我。單頁水平滾動網站 - 無法突出顯示導航欄上的當前鏈接

這就是我的代碼的樣子。

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中滾動而不是在正文中有什麼關係？

來源

2016-12-08 Quasar

問題尋求幫助調試（「爲什麼不是這個代碼的工作？」）必須包括所期望的行爲，一個特定的問題或錯誤，並重現它在問題本身所需要的最短的代碼。沒有明確問題陳述的問題對其他讀者無益。 – goto

你有沒有考慮過使用fullPage.js？ – Alvaro

你能說一下那個@Alvaro嗎？ – Quasar

試試這段代碼。

  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"); 
     });

來源

2016-12-08 15:00:03 vel

這是一個水平滾動頁面 – Quasar

單頁水平滾動網站 - 無法突出顯示導航欄上的當前鏈接

回答

相關問題