突出显示菜单栏航点答案

【问题标题】：Highlighting Menu Bar Waypoints突出显示菜单栏航点
【发布时间】：2013-07-15 10:58:17
【问题描述】：

我正在创建一个站点，并希望将这个站点中的一些内容合并到我的菜单中。 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>

菜单栏这是菜单栏，如下所示，它对应于整个 html 中导航导致跳转到的标记

<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>

一个标记看起来像这样

<div class = 'mark' id = 'what'></div>

标签在每个标记之前和之后使用，以设置导航将更改的所需部分

【问题讨论】：

标签： javascript jquery html css jquery-waypoints

【解决方案1】：

这对我来说很好用。我写了一堆cmets，所以希望它很清楚。

   <!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>

【讨论】：

【解决方案2】：

看起来您正在另一个对航点的调用中调用航点。这是你想做的吗？

 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 将会很有帮助。

【讨论】：

整个页面被分成不同的部分，所有的部分都显示在菜单栏中。当视图位于其对应的部分时，我希望菜单栏上的导航变为蓝色。我现在添加一些 html，以便您了解我的想法。