0

私はサイトを作っている途中で、このサイトのいくつかをメニューに取り入れたいと思っています。 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>

ここのメニュー バーは、以下に示すメニュー バーです。これは、nav がジャンプする 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>

タグは各マークの直前と直後に使用され、ナビゲーションが変更される目的のセクションを設定します

4

2 に答える 2

0

waypoint への別の呼び出し内で waypoint を呼び出しているようです。これはあなたがやりたかったことですか？

 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-14T19:50:20.143 に答える