2

我快用 Waypoints 撕掉我的头发了。首先，我对 javascript 的经验还很遥远。我正在使用 Waypoints 1）将导航固定到屏幕顶部的某个点（这很好用）和 2），当到达某些部分时突出显示导航项。一切正常，除非您单击需要航点方向向上的导航项目，例如单击“异常值”，然后单击“目的地”。您会注意到航点似乎偏离了一个像素，并且“异常值”仍然突出显示。如果向上滚动一个像素，“目的地”最终会突出显示。这是复制此行为的唯一方法...单击向下滚动的导航项目可以正常工作。这是我的 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 回答