Question

我有一个我正在处理的网站模板，可以在这里看到：

http://www.procardetail.co.uk/

正如你所看到的，我有一个带有粘性标题的Waypoints。

当我向下滚动页面时，一切正常，导航链接会在遇到页面上的锚点时按预期突出显示。

但是，向上滚动时，突出显示链接的功能不起作用。

我使用的javascript看起来像这样：

$(function() {

// Do our DOM lookups beforehand
var nav_container = $("#navs");
var nav = $("nav");

var top_spacing = 15;
var waypoint_offset = 50;

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

        if (direction == 'down') {

            nav_container.css({ 'height':nav.outerHeight() });      
            nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({"top":top_spacing});

        } else {

            nav_container.css({ 'height':'auto' });
            nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});

        }

    },
    offset: function() {
        return -nav.outerHeight()-waypoint_offset;
    }
});

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

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

        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");

    },
    offset: '25%'
})


navigation_links.click( function(event) {

    $.scrollTo(
        $(this).attr("href"),
        {
            duration: 100,
            offset: { 'left':0, 'top':-0.15*$(window).height() }
        }
    );
});

}）;

是否有人能够阐明为何会发生这种情况？

感谢您的时间和帮助。

Waypoints - Sticky Header Navigation。向下滚动但不向上滚动时突出显示链接

0 个答案: