Question

我接近用Waypoints撕掉我的头发。首先，我远没有体验过javascript。我正在使用Waypoints来1）将导航到某个点的屏幕顶部（这很好）和2），在到达某些部分时突出显示导航项。除非您单击需要航点指向的导航项目，例如，一切都能正常工作。单击“特殊值”，然后单击“目标”。您会注意到航点似乎是一个像素关闭，“异常值”仍然突出显示。如果向上滚动像素，“目标”最终会突出显示。这是复制此行为的唯一方法...单击向下滚动的导航项工作正常。这是我的JS：http://jsfiddle.net/TreUd/。以下是它在http://ifb.thepinkrobot.com/上实施的网站。感谢您的帮助...非常感谢。

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

Answer 1

这绝对是一个奇怪的。您的标题上似乎有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
    })

通过单击向上滚动时，jQuery Waypoints粘性导航是1px关闭

1 个答案: