Slider/scrolling 导航 - 从导航中排除部分并更改部分的导航颜色

Question

您好，我目前正在使用 fullpage.js 并想使用固定的 "slider" 导航（右侧有圆点），但有两个问题我正在尝试解决。

如何使某些部分在导航中显示为 items/links 而不是每个部分（它当前选择的部分）？基本上，我在页面的每 3-4 个部分有一个 "title slide"，并且只希望这些部分出现在导航中，而不是中间的所有部分。是否可以创建一些变量用作目标？或者有人知道允许这种行为的替代 slideNav 吗？

function addVerticalNavigation(){
    $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
    var nav = $(SECTION_NAV_SEL);

    nav.addClass(function() {
        return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
    });

    for (var i = 0; i < $(SECTION_SEL).length; i++) {
        var link = '';
        if (options.anchors.length) {
            link = options.anchors[i];
        }

        var li = '<li><a href="#' + link + '"><span></span></a>';

我想根据特定部分的背景颜色来改变导航的颜色（白色或黑色）。我找到了一个代码片段，可以帮助我针对固定导航栏实现此目的... ...但是它的目标 html/a 导航 'div' 对于 slidesNav 不存在...据我所知，很多 jquery 滑块导航都是这种情况。有人可以提出一种解决方法，或者知道其中确实包含 html?

Answer 1

1- 可能最简单的方法是创建您自己的导航系统并使用 fullpage.js 回调或状态 classes 设置活动导航系统的样式。检查 .

2- 只需覆盖元素的活动 class 并使用不同的颜色。

#fp-nav ul li:nth-child(1) a.active span, 
#fp-nav ul li:nth-child(1):hover a.active span{
    background:blue;
}
#fp-nav ul li:nth-child(2) a.active span, 
#fp-nav ul li:nth-child(2):hover a.active span{
    background:red;
}

Demo online

Slider/scrolling 导航 - 从导航中排除部分并更改部分的导航颜色

Slider/scrolling navigation - excluding sections from nav and changing nav color over sections

javascript

css

jquery

fullpage.js