Question

我正在使用jQuery进行单页导航。我想要的是当用户滚动时，突出显示的菜单将被更改。我想出了以下代码：

HTML

<body class="index m-scene" id="main">

<!-- // Start HTML \\ -->
<header id="header" class="fixed">
    <div class="container_12">
        <h1 class="grid_4">
            <a href="#" class="logo backtotop">
                <img src="images/logo.png" alt="">
                <span>Maurice Draait</span>
            </a>
        </h1><!-- End h1.grid_4 -->

        <div class="grid_8">
            <a href="#" class="toggle-menu"><span>Menu</span></a>
            <nav id="primary-navwrapper" class="pushy-right">
                <ul id="listnav">
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#aboutus">About us</a></li>
                    <li><a href="#events">Agenda</a></li>
                    <li><a href="#gallery">Galerij</a></li>
                    <li><a href="#organisation">Organisatie</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul><!-- End ul#listnav -->

            </nav><!-- End nav#primary-navwrapper .pushy-right -->

        </div><!-- End div.grid_8 -->

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->
</header><!-- End header#header .fixed -->

<div class="m-page scene_element scene_element--fadeinup">
<main class="container">
    <section id="hero">
        <figure>
            <figcaption>
                <div class="container_12">
                    <hgroup class="grid_12">
                        <h1>
                            Headline 1
                        </h1>

                        <h2>
Headline 2
                        </h2>

                        <h3>
                            Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. 
                            <br>
                            Nullam id dolor id nibh ultricies vehicula ut id elit. 
                        </h3>
                    </hgroup><!-- End hgroup.grid_12 -->

                <div class="clear"></div><!-- End div.clear -->
                </div><!-- End div.container_12 center -->
            </figcaption>
        </figure><!-- End figure -->
    </section><!-- End section#hero -->


    <section id="aboutus" class="e-waypoint">
        <div class="container_12 center">
            <header class="grid_12 center">
                <h3>Maurice Draait</h3>
                <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                    <br>
                    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                    <br>
                    sunt in culpa qui officia deserunt mollit anim id est laborum. 
                    <br>
                    Sed ut perspiciatis unde omnis iste natus error sit. 
                </p>
            </header><!-- End header.grid_12 center -->

            <footer class="grid_12 center">
                <a href="#" title="Meer weten" class="button primary">Learn more about us &rarr;</a>
            </footer><!-- End footer.grid_12 center -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 center -->
    </section><!-- End section#aboutus .e-waypoint -->


    <section id="events" class="alt">
        <div class="container_12 center">
            <header class="grid_12 center">
                <h3>Agenda</h3>
                <p>
                    Donec quis semper magna. Vivamus pellentesque tempor tincidunt.
                    <br> 
                    Proin quis eros dolor. Donec sed venenatis enim. 
                </p>
            </header><!-- End header.grid_12 center -->

            <article class="grid_6 post-entry event">
                <a href="#" title="">
                <figure class="post-thumbnail">
                    <img src="images/event.png" alt="Placehold">

                    <figcaption>
                        <h4>22 november</h4>
                        <p>Maecenas sed enim iaculis.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
                </a>
            </article><!-- End article.grid_6 post-entry event -->

            <article class="grid_6 post-entry event">
                <a href="#" title="">
                <figure class="post-thumbnail">
                    <img src="images/event.png" alt="Placehold">

                    <figcaption>
                        <h4>8 december</h4>
                        <p>Quisque hendrerit.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
                </a>
            </article><!-- End article.grid_6 post-entry event -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 center -->
    </section><!-- End section#events .alt -->


    <section id="gallery" class="even">
        <div class="container_12">
            <header class="grid_12 center">
                <h3>Galerij</h3>
                <p>
                    Donec quis semper magna. Vivamus pellentesque tempor tincidunt.
                    <br> 
                    Proin quis eros dolor. Donec sed venenatis enim. 
                </p>
            </header><!-- End header.grid_12 center -->

            <div class="entry">
                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->

                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->

                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->

                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->

                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->

                <article class="grid_4 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumbnail">
                        <img src="images/placehold.png" alt="Placehold">
                    </figure><!-- End figure.post-thumbnail -->

                    <header>
                        <h4>Maurice Draait Weer</h4>
                        <p>Donec quis semper magna. Vivamus pellentesque tempor tincidunt.</p>
                    </header><!-- End header -->

                    </a>
                </article><!-- End article.grid_4 post-entry -->
            </div><!-- End div.entry -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 -->
    </section><!-- End section#gallery .even -->


    <section id="organisation" class="alt">
        <div class="container_12 center">
            <header class="grid_12 center">
                <h3>Organisatie</h3>
                <p>
                    Donec quis semper magna. Vivamus pellentesque tempor tincidunt.
                    <br> 
                    Proin quis eros dolor. Donec sed venenatis enim. 
                </p>
            </header><!-- End header.grid_12 center -->

            <article class="grid_3 post-entry">
                <figure class="post-thumbnail avatar">
                    <img src="images/casperbiemans.png" alt="Placehold">

                    <figcaption>
                        <h4>Headline 4</h4>
                        <p>Donec quis semper magna.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
            </article><!-- End article.grid_3 post-entry -->

            <article class="grid_3 post-entry">
                <figure class="post-thumbnail avatar">
                    <img src="images/casperbiemans.png" alt="Placehold">

                    <figcaption>
                        <h4>Headline 4</h4>
                        <p>Donec quis semper magna.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
            </article><!-- End article.grid_3 post-entry -->

            <article class="grid_3 post-entry">
                <figure class="post-thumbnail avatar">
                    <img src="images/casperbiemans.png" alt="Placehold">

                    <figcaption>
                        <h4>Headline 4</h4>
                        <p>Donec quis semper magna.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
            </article><!-- End article.grid_3 post-entry -->

            <article class="grid_3 post-entry">
                <figure class="post-thumbnailnail avatar">
                    <img src="images/casperbiemans.png" alt="Placehold">

                    <figcaption>
                        <h4>Headline 4</h4>
                        <p>Donec quis semper magna.</p>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumbnail -->
            </article><!-- End article.grid_3 post-entry -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 center -->
    </section><!-- End section#organisation .alt -->


    <figure class="parallax socialmedia">
        <figcaption>
            <div class="container_12">
                <header class="grid_12 center">
                    <h3>Like ons op Facebook</h3>
                    <p>
                        Maecenas sed enim iaculis, elementum enim quis, 
                        <br>
                        dignissim lectus. Quisque at pellentesque. 
                    </p>
                </header><!-- End header.grid_12 center -->

                <footer class="grid_12 center">
                    <a href="#" title="Volg ons online" class="button primary" id="buttonContact">Volg ons online &rarr;</a>
                </footer><!-- End footer.grid_12 center -->
            <div class="clear"></div><!-- End div.clear -->
            </div><!-- End div.container_12 -->
        </figcaption>
    </figure><!-- End figure.parallax social -->


    <section id="contact" class="even">
        <div class="container_12 center">
            <header class="grid_12 center">
                <h3>Contact</h3>

                <a href="contact.html" title="Meer weten" class="button primary">Get in touch &rarr;</a>
            </header><!-- End header.grid_12 center -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 center -->
    </section><!-- End section#contact .even -->
</main><!-- End main.container -->

<footer id="footer">
    <div class="container_12">
        <div class="grid_12 center">
            <ul class="list-of-links">
                <li><a href="#aboutus">About us</a></li>
                <li><a href="#galerij">Galerij</a></li>
                <li><a href="#organisatie">Organisatie</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul><!-- End ul#listnav -->
        </div><!-- End div.grid_12 center -->

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->

</footer><!-- End footer#footer -->
</div>
<!-- JavaScript -->
<script src="js/retina.js" type="text/javascript"></script>


</body>
</html>

JS

// Update current item class
function setActiveListElements(event){
    var windowPos = $(window).scrollTop();

    $('#primary-navwrapper li a[href^="#"]').each(function() { 
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));

        if (refElement.position() <= windowPos && refElement.position().top + refElement.height() > windowPos) {
            $('#primary-navwrapper li a').removeClass("current");
            currentLink.addClass("current");
        }
        else{
            currentLink.removeClass("current");
        }
    });
}



// Update menu item on scroll
$(window).scroll(function() {
       // Call function
    setActiveListElements();
});

http://jsfiddle.net/8n06pvy9/6/

这段代码的问题在于我收到错误：Uncaught TypeError: Cannot read property 'top' of undefined。

我还没有找到解决方案。

Answer 1

以下是答案：

    // The id of the section we want to go to.
    var anchorId = $(this).attr("href");

    // Our scroll target : the top position of the
    // section that has the id referenced by our href.
    if (anchorId.length > 1 && $(anchorId))
    {
     var target = $(anchorId).offset().top - offset;
    }
    else
    {
     var target = 0;
    }

当链接只有#时，没有锚点。它指的是页面顶部，但没有附加锚元素。因此，获得未定义的顶部是不可能的。此代码现在检查href长度是否超过1（例如：#test），并且页面上的元素是实际ID。如果是，则计算偏移量，如果未将偏移量设置为0。这意味着，返回页面顶部。

http://jsfiddle.net/8n06pvy9/8/

实际上，相同类型的答案适用于突出显示问题。它使用home导航按钮选择了文档，因为它没有链接到section元素。 jQuery不返回有效选择，position()将失败。

function setActiveListElements(event){
    var windowPos = $(window).scrollTop();
    $('#primary-navwrapper li a[href^="#"]').each(function() { 

        var currentLink = $(this);
        if ($(currentLink.attr("href")).length > 0)
            {
            var refElement = $(currentLink.attr("href"));
            if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").height() ) > windowPos) {
                $('#primary-navwrapper li a').removeClass("current");
                currentLink.addClass("current");
            }
            else{
                currentLink.removeClass("current");
            }
        }
    });
}

再次检查所选元素是否具有链接的section元素，如果是，则继续。

http://jsfiddle.net/8n06pvy9/9/

突出显示滚动时的活动菜单项

1 个答案: