2

ウェイポイントで髪を引きちぎろうとしています。まず第一に、私は JavaScript の経験がありません。私はウェイポイントを使用して、1) 特定のポイントでナビゲーションを画面の上部に固定し (これは正常に動作します)、2) 特定のセクションに達したときにナビゲーション項目を強調表示します。ウェイポイントの方向を上にする必要があるナビゲーション項目をクリックする場合を除いて、すべてが完全に機能します。たとえば、[例外的な値] をクリックしてから [目的地] をクリックします。ウェイポイントが 1 ピクセルずれているように見え、「Exceptional Value」がまだ強調表示されていることに気付くでしょう。1 ピクセル上にスクロールすると、最終的に「目的地」が強調表示されます。これがこの動作を再現する唯一の方法です...下にスクロールするナビゲーション項目をクリックすると正常に動作します。ここに私の JS があります: http://jsfiddle.net/TreUd/。実装されているサイトは次のとおりです。. 助けてくれてありがとう...それは大歓迎です。

        <!-- waypoints -->
    <script type="text/javascript">
    $(document).ready(function(){
      $('.nav-container').waypoint(function(direction) {
        $('nav#main').toggleClass('sticky', direction === 'down');  
      });
    });
    </script>

    <script type="text/javascript">
    var sections = $("section");
        var navigation_links = $("nav a");

        sections.waypoint({
            handler: function(event, direction) {

                var active_section;
                active_section = $(this);
                if (direction === "down") active_section = active_section.prev();

                var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
                navigation_links.removeClass("selected");
                active_link.addClass("selected");

            },
            offset: 50
        })
    </script>
    <!-- end waypoints -->
4

1 に答える 1

2

それは間違いなく奇妙なものです。問題を引き起こしている可能性があるヘッダーに 3px の境界線があるようです。ただし、ウェイポイントのオフセットを 50 から 53 に増やすと、問題が解決するようです。

var sections = $("section");
var navigation_links = $("nav a");

    sections.waypoint({
        handler: function (event, direction) {

            var active_section;
            active_section = $(this);
            if (direction === "down") active_section = active_section.prev();

            var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
            navigation_links.removeClass("selected");
            active_link.addClass("selected");

        },
        offset: 53
    })
于 2013-04-05T03:12:34.307 に答える