Question

您好，我目前正在使用fullpage.js并希望使用固定的＆＃34;滑块＆＃34;导航（右边的点），但有两个问题，我试图解决。

如何仅将某些部分显示为导航中的项目/链接，而不是每个部分（目前正在接收的部分）？基本上，我有一个＆＃34;标题幻灯片＆＃34;页面的每3-4个部分只希望这些部分出现在导航中，而不是介于两者之间的所有部分。是否可以创建一些变量用作目标？或者有人知道允许这种行为的替代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>';

我想根据特定的部分背景颜色区分导航颜色（白色或黑色）。我找到了一个代码片段，可以帮助我实现固定导航栏... Make Header/Navigation change colour when on different section of the website ...但是它的目标是html / nav＆＃39; div＆＃39;对于slideNav来说，它并不存在......从我所看到的情况来看，很多这些jquery滑块导航就是这种情况。有人可以建议一个解决方法，或者知道哪个包含html？

Answer 1

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

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

#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

滑块/滚动导航 - 从导航中排除部分并更改部分的导航颜色

1 个答案: