突出顯示菜單欄航點

即時在製作網站的過程中，並希望從本網站的一些東西到我的菜單。 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ 我真的很喜歡我的菜單欄基於該部分進行更改，但是對JavaScript來說是全新的，並且遇到了一些麻煩。現在，它似乎沒有工作。有什麼建議麼？謝謝！繼承人位代碼突出顯示菜單欄航點

<script language="javascript" type="text/javascript"> 
     $(function() { 
     // Do our DOM lookups beforehand 
     var nav_container = $(".nav-container"); 
     var nav = $("nav"); 
     nav_container.waypoint({ 
     handler: function(direction) { 
     nav_container.toggleClass('sticky', direction=='down'); 

     } 
     var sections = $('section'); 
     var navigation_links = $('nav a'); 
     sections.waypoint({ 
     handler: function(event, direction) { 
     // handler code 
     }, 
     offset: '35%' 
     }); 
     var active_section; 
     active_section = $(this); 
     if (direction === "up") active_section = active_section.prev(); 
     var active_link = $('nav a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.removeClass("selected"); 
     active_link.addClass("selected"); 
     }); 

     $("li.nav-item").click(function() { 
     $("html, body").animate({ 
     scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing" 
     }); 
     return false; 
     }); 
     $(document).ready(function(){ 
     $('img').click(function(){ 
     // get the url of the picture we clicked 
     var url = $(this).attr('src'); 
     // get the url of the large image 
     var bigUrl = $('.large-picture > img').attr('src'); 
     // change the url of the big picture 
     $('.large-picture > img').attr('src', url); 
     $(this).attr('src', bigUrl); 
     }); 
     }); 

     }); 

    </script>

菜單欄這裏是菜單欄，你可以看到下面，它對應的標記貫穿到其資產淨值並跳轉到

<div class = 'nav-container'> 
    <nav> 
     <div id = 'nav-items-container'> 
      <ul class='nav-items'> 
       <li class='nav-item'><a href='#what'>what</a></li> 
       <li class='nav-item'><a href='#how'>how</a></li> 
       <li class='nav-item'><a href='#why'>why</a></li> 
       <li class='nav-item'><a href='#who'>who</a></li> 
       <li class='nav-item'><a href='#where'>where</a></li> 
      </ul> 
     </div> 
    </nav> 
</div>

的HTML標記看起來像這樣

標籤前右，右所用的每個關口後成立所需的部分，其中淨資產值將改變

來源

2013-07-14 nictoriousface

這對我來說工作得很好。我寫了一堆評論，希望很清楚。

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Smashing HTML5!</title> 


    <style type="text/css"> 
    li { display:inline; background-color: #004900; padding: 4px; font-weight: bold;} 
    li a { color:#fff; text-decoration: none;} 

    .mark { position: absolute; color: #fff; height: 500px; width: 100%; 
      font-size: 24px; padding: 10px; padding-top: 50px;} 

    #who{ top: 500px; background-color: #005600;} 
    #what{ top: 1000px; background-color: #000078;} 
    #how{ top: 1500px; background-color: #f30000;} 
    #why{ top: 2000px; background-color: #00ff00;} 
    #where{ top: 2500px; background-color: #000022;} 

    .nav-container { z-index: 100;} 

    </style> 


    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 

    <![endif]--> 
    <!--[if lte IE 7]> 
    <script src="js/IE8.js" type="text/javascript"></script><![endif]--> 
    <!--[if lt IE 7]> 

    <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> 

    <!-- DON'T FORGET TO CHANGE THESE PATHS --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="/jquery.1.10.2.min"></script> 

    <script src="/waypoints/waypoints.min.js"></script> 

    <script src="/waypoints/shortcuts/sticky-elements/waypoints-sticky.min.js"></script> 



    <script> 

     $(document).ready(function(){ 

     var wid; 


     /*the shortcut below is all you need to make the menu 
     stick to the top. --- make sure to load 
     waypoints-sticky.min.js as I have in the 
     <head> section*/ 
     $('.nav-container').waypoint('sticky'); 

     //helper function that does the high-lighting --- I've written it out 
     //step by step 
     function highlight(hl_id){ 
      $("li > a").css({ "background-color" : "#004900", "color": "#fff"}); 
      $("li").css({"background-color" : "#004900", "color": "#fff"}); 
      $("#" + hl_id + "-nav").css({"background-color" : "#f0f0f0", "color": "#000"}); 
      $("#" + hl_id + "-nav > a").css({ 
      "background-color" : "#f0f0f0", "color": "#000"}); 
     } 


     /* now we turn the marks into waypoints*/ 
     $('.mark').waypoint(function(direction) { 

     /* now we get the id of the waypoint we're jumping to*/ 
      wid = $(this).attr("id"); 

    //if we're scrolling up we get "previous" waypoint 
    if (direction == 'up'){ 

     var highlight_p = $('#' + wid).waypoint('prev'); 
     wid_p = highlight_p.attr("id"); 

     highlight(wid_p); 

    } 

    //if we're scrolling up we get last waypoint 
    else if (direction == 'down') { 

     highlight(wid); 
    } 





    }); 



    });//end doc ready 




    </script> 



    </head> 

    <body id="index" class="home"> 

    <div class='nav-container' style="position:fixed;"> 
    <nav> 
     <div id='nav-items-container'> 
      <ul class='nav-items'> 

       <li class='nav-item' id="who-nav"><a href='#who'>who</a></li> 
       <li class='nav-item' id="what-nav"><a href='#what'>what</a></li> 
       <li class='nav-item' id="how-nav"><a href='#how'>how</a></li> 
       <li class='nav-item' id="why-nav"><a href='#why'>why</a></li> 
       <li class='nav-item' id="where-nav"><a href='#where'>where</a></li> 
      </ul> 
     </div> 
    </nav> 

    </div> 



    <div class='mark' id='who'>who</div> 
    <div class='mark' id='what'>what</div> 
    <div class='mark' id='how'>how</div> 
    <div class='mark' id='why'>why</div> 
    <div class='mark' id='where'>where</div> 

    </body> 
    </html>

來源

2013-07-15 02:58:17

它看起來像你在另一個呼叫到航點內呼叫航點。這是你想要做的嗎？

nav_container.waypoint({ 
    //first call to waypoint 
     handler: function(direction) { 
     nav_container.toggleClass('sticky', direction=='down'); 

     } 
     //close handler 
     var sections = $('section'); 
     var navigation_links = $('nav a'); 

     //second waypoint call 
     sections.waypoint({ 
     handler: function(event, direction) { 
     // handler code 
     }, 
     offset: '35%' 
     });

你能描述一下你想如何改變你的菜單以及在哪個路點（哪個元素）？此外，如果您可以發佈一些html會有所幫助。

來源

2013-07-14 19:50:20

整個頁面被分成不同的部分，所有這些部分都在菜單欄中表示。像菜單欄上的導航欄一樣，當視圖位於其對應的部分時，就會變藍。如果現在添加一些html，那麼您可以瞭解我在想什麼。 – nictoriousface

突出顯示菜單欄航點

回答

相關問題