我已经在StackOverflow上工作了几天，现在尝试在导航菜单中创建一个线条指示器。下面我发布了我的3段代码（HTML，CSS，JS）。请记住，我正在使用fullpage.js脚本作为我网站的基本结构。
我使用旁边导航类对HTML导航部分进行编码，并在整页配置（HTML代码底部）中定义了菜单选择器。
我还创建了一个名为Navigation的JS，其函数使得每行开始行，最后减少它，然后继续到下一部分，但这并不是似乎工作。
出于某种原因，与我的CSS选择器相关的东西不能与fullpage.js一起使用？我很困惑;如果有人能指出我的方向会很棒！
由于帖子限制，我删除了一些超出问题范围的css代码。我很抱歉这个巨大的帖子;只是试图准确显示我所做的事情。
感谢您提前所有！
// NAVIGATION INDICATOR ANIMATION //
Navigation = function (e, t) {
function i(t) {
this.scrollController = t, this.navLinks = [[e("#link-section-what-we-do"), !1], [e("#link-section-our-approach"), !1], [e("#link-section-who-we-are"), !1], [e("#link-section-clients"), !1], [e("#link-section-contact"), !1]], this.navScenes = [], this.init()
}
return i.prototype.init = function () {
var i = this;
t.setTimeout(function () {
i.initScrollMagic()
}, 500), e(t).resize(function () {
i.refreshScenes()
})
}, i.prototype.initScrollMagic = function () {
var t = this;
this.navScenes.push(new ScrollMagic.Scene({
triggerElement: "#section-product",
duration: e("#section-product").outerHeight(!0)
}).setClassToggle("#link-section-what-we-do", "active").addTo(this.scrollController).on("progress", function (e) {
t.scrollProgress(e, 0)
}).on("enter", function (e) {
t.scrollProgress(e, 0, !0)
}).on("end, leave", function (e) {
t.scrollProgressEnd(e, 0)
})), this.navScenes.push(new ScrollMagic.Scene({
triggerElement: "#the-variety",
duration: e("#the-variety").outerHeight(!0)
}).setClassToggle("#link-section-our-approach", "active").addTo(this.scrollController).on("progress", function (e) {
t.scrollProgress(e, 1)
}).on("enter", function (e) {
t.scrollProgress(e, 1, !0)
}).on("end, leave", function (e) {
t.scrollProgressEnd(e, 1)
})), this.navScenes.push(new ScrollMagic.Scene({
triggerElement: "#section-who-we-are",
duration: e("#section-who-we-are").outerHeight(!0)
}).setClassToggle("#link-section-who-we-are", "active").addTo(this.scrollController).on("progress", function (e) {
t.scrollProgress(e, 2)
}).on("enter", function (e) {
t.scrollProgress(e, 2, !0)
}).on("end leave", function (e) {
t.scrollProgressEnd(e, 2)
})), this.navScenes.push(new ScrollMagic.Scene({
triggerElement: "#section-clients",
duration: e("#section-clients").outerHeight(!0)
}).setClassToggle("#link-section-clients", "active").addTo(this.scrollController).on("progress", function (e) {
t.scrollProgress(e, 3)
}).on("enter", function (e) {
t.scrollProgress(e, 3, !0)
}).on("end, leave", function (e) {
t.scrollProgressEnd(e, 3)
})), this.navScenes.push(new ScrollMagic.Scene({
triggerElement: "#section-contact",
duration: e("#section-contact").outerHeight(!0)
}).setClassToggle("#link-section-contact", "active").addTo(this.scrollController).on("progress", function (e) {
t.scrollProgress(e, 4)
}).on("enter", function (e) {
t.scrollProgress(e, 4, !0)
}).on("end, leave", function (e) {
t.scrollProgressEnd(e, 4)
}))
}, i.prototype.refreshScenes = function () {
for (var t = 0; t < this.navScenes.length; t++) {
var i = e(this.navScenes[t].triggerElement()).outerHeight(!0);
this.navScenes[t].duration(i)
}
}, i.prototype.scrollProgress = function (e, t, i) {
var n = 44,
r = this,
s = this.navLinks[t][0].find(".nav-indicator");
i ? (this.navLinks[t][1] = !0, TweenMax.set(s, {
height: 0
}), TweenMax.to(s, .2, {
height: (1 - e.progress) * n + "px",
ease: Power3.easeIn,
onComplete: function () {
r.navLinks[t][1] = !1
}
})) : this.navLinks[t][1] || s.css("height", (1 - e.progress) * n + "px")
}, i.prototype.scrollProgressEnd = function (e, t) {
var i = this.navLinks[t][0].find(".nav-indicator");
this.navLinks[t][1] = !1, i.removeAttr("style")
}, i
}(jQuery, window, document); /******** NAVIGATION **********/
.aside-navigation {
position: fixed;
z-index: 4;
display: none
}
.aside-navigation.hidden {
display: none
}
.lt-ie9 .aside-navigation {
display: block
}
.aside-navigation ul {
display: block;
list-style-type: none;
padding-left: 0;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
position: fixed;
top: 50%;
right: 0;
transform: rotate(90deg) translate3d(0, -12rem, 0);
transform-origin: center center;
z-index: 200
}
.aside-navigation ul li {
color: #909090;
margin-right: 2.75rem;
transition: color .5s;
display: inline-block;
position: relative
}
.aside-navigation ul li:hover {
color: #77919f
}
.aside-navigation ul li:last-child {
margin-right: 0
}
.aside-navigation ul li a {
color: inherit;
text-decoration: inherit;
text-transform: uppercase;
cursor: pointer;
padding: .75rem 0;
font-size: .75rem
}
.aside-navigation ul li a:active,
.aside-navigation ul li a:focus {
outline: none
}
.aside-navigation ul li.active {
color: #c9a739
}
.aside-navigation ul li.active .nav-indicator {
background: #000;
position: absolute;
top: 3.4375rem;
left: 50%;
height: 2.75rem;
width: .125rem;
margin-left: -1px;
z-index: 999
}
@media only screen and (min-width:48em) {
.aside-navigation {
display: block
}
}
@media only screen and (min-width:90em) {
.aside-navigation ul {
transform: rotate(90deg) translateY(-14.875rem)
}
.aside-navigation ul li a {
font-size: 1rem;
padding: .75rem 0
}
}
@media only screen and (max-height:41.875em) {
.aside-navigation ul {
transform: rotate(90deg) translateY(-4.625rem)
}
.aside-navigation ul li {
margin-right: 0
}
.aside-navigation ul li a {
font-size: 0;
width: 2.75rem;
height: 2.75rem;
text-align: center;
display: inline-block
}
.aside-navigation ul li a:before {
line-height: 3.125rem;
content: '⋅';
font-size: 3.125rem
}
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.fullpage.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script src="js/midnight.jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body class="body">
<nav id="small-logo-layer" class="small-logo-layer"><a href="#home" class="small-logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="" height="100%"
viewBox="0 0 149.3 170.7" style="enable-background:new 0 0 149.3 170.7;" xml:space="preserve">
<title>brand-logo</title>
<g id="logo-small" fill="#FEFEFE">
<path d="M84.3,168.2c0,0-0.2-42.9-1.9-54.4c-0.2-1.1-0.7-2.2-1.2-3.2c-0.9-0.9-2-1.6-3.1-2.1
c-0.5-0.3-0.9-0.5-1.3-0.9c-0.5-0.5-20.8-18.6-34-43.5c-5.5-10.4-13.4-25.6-8.2-28.5c4.2-2.4,28.2,13.3,35,22.9
c11.9,16.8,16.6,37.5,17,50.7c0.1,15.7,1.2,43.3,1.3,59 M82.8,106.7c3.2,1.3-1.6-12.1-2.4-15.7c-2-8.6-5.8-18-16.6-33.2
c-7.2-10.1-25.6-21.6-27.9-19.2C29.9,44.6,65.5,99.5,82.8,106.7z"/>
<path d="M118.4,66.8c0.3,2.1,0.7,14.4-4.7,22.8c-8.1,12.6-20.1,16.8-25.8,21.3c-2.4,1.9-5.1,6.3-5,3.7
c0.6-13.8,20.6-30.7,20.6-30.7C114,72.8,117.5,60.7,118.4,66.8z"/>
<ellipse transform="matrix(0.8217 -0.5699 0.5699 0.8217 -24.873 28.4332)" cx="33" cy="54" rx="2.3" ry="2.3"/>
<ellipse transform="matrix(0.8217 -0.5699 0.5699 0.8217 -20.6115 72.7065)" cx="105.9" cy="69.3" rx="3.4" ry="3.4"/>
<ellipse transform="matrix(0.8217 -0.5699 0.5699 0.8217 -48.7922 74.6922)" cx="95" cy="115.3" rx="3.9" ry="3.9"/>
</g>
<g>
<g id="logo-small" fill="#FEFEFE">
<path d="M149.3,170.7H0V0h149.3V170.7z M5,165.7h139.3V5H5V165.7z"/>
</g>
</g>
</svg>
</a>
</nav>
<section class="aside-navigation">
<ul>
<li id="link-section-what-we-do"><a class="click-to-scroll active" href="#the-product">The Product<span class="nav-indicator"></span></a></li>
<li id="link-section-our-approach"><a class="click-to-scroll" href="#the-variety">The Variety<span class="nav-indicator"></span></a></li>
<li id="link-section-who-we-are"><a class="click-to-scroll" href="#the-diet">The Diet<span class="nav-indicator"></span></a></li>
<li id="link-section-clients"><a class="click-to-scroll" href="#about-us">About us<span class="nav-indicator"></span></a></li>
<li id="link-section-contact"><a class="click-to-scroll" href="#contact-us">Contact us<span class="nav-indicator"></span></a></li>
</ul>
</section>
<div id="wrapper">
<div id="section-home" class="section" data-anchor="home" data-midnight="gone"></div>
<div id="section-product" class="section" data-anchor="the-product" data-midnight="dark">
<div class="hsContent text-index" data-center="transform: translateY(0px);" data-bottom-top="opacity: 1" data--100-bottom="opacity:1;transform: translateY(0px);" data-center-top="opacity: 1;transform: translateY(212px);" data-anchor-target="#the-product">
<h2>THE<br/> PRODUCT</h2>
<h3>My product is awesome</h3>
<div class=description>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div data-modal-id=product class="read_more_text ">Read more</div>
</div>
<div class="vertical-line bez"></div>
</div>
</div>
<div id="section-variety" class="section" data-anchor="the-variety" data-midnight="white"></div>
<div id="section-diet" class="section" data-anchor="the-diet" data-midnight="dark"></div>
<div id="section-about" class="section" data-anchor="about-us" data-midnight="white"></div>
<div id="section-contact" class="section" data-anchor="contact-us" data-midnight="white"></div>
<div data-modal=product>
<div class=modal-container>
<div class=close-custom-modal><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio=xMidYMid width=65 height=65 viewBox="0 0 65 65">
<image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABy1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAABJV5kDAAAAl3RSTlMABDlrlLra7fsSarTyRq/42JkoFAPXAVDK/LhgGrfLLcPleXgHi+kGiiT9lhCVS/HeNzZx/oFcaF1Ob3CHKQjTqt8M2TjCT1FFCa56VcwdHBP5GdEK0LGtableDtKDgiLqWFcWPED1NTQ/bJtm4xtlcpLIk7ukJw/bJvD6DZpuSiU91pG2GOhWHi4LjIDU5m3EX7WwREfznSn3YAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAPvSURBVFjDrVjxQ9NWED4tLaGmRUotRkoLVKrWAhWiAkLZQIWiVVrQ4dCpm9OpcyoiKCoqOhyCqOj8/t29tIW2yXtpgvt+aPLu7l2Se/e+u1ciAXbsdFQ5XdUSpGqXs8qxcwfZQo17l4xyyLvcNZbne7y1bMruOrfHV+8nf73P467bwyS1Xo+V6YGGvYCyrzGokwcbmxQg1BCo5CDcDLS0Brm6YKQFaA6bzt/fJiHqOCDUH3BEIR3cL3ZwKITY4bjpM+LtMYQOibQdnUgcqRiorgQ6O/iqRgneeEUH7DW8kBp5im4VRysGOofAUVXtNoqPqepxS/M1HFfVHr2sV0GfZQdEJ6D0lkt8nei34YCoH50DpePkILzWYrAVix8wmCwZH8SPVlahFEPDaCuOwpJy0qYDoiOKtJXggVM4bNsBUTuaN7/8NKJ2v0FDPIqRwu1enNiGA6I+hPI3o4imtuUhFUWecsZwRq87mz5nnHA+fVYnaYVXu4xnlKzeuB8Tk3rZ5AVD0mWVjMadbjQZHue/iDFdhgV+wkW/3q4JU+z3En42vvH0ZVwpl/yCy9MGs2O4xBK6FjxWvHpNvV46/lW9dtVo9VusNkk3sIcb6N8zN28VR3/czNzmWU3gBt3BXa4H+hP3/tq8D97Dfa7RXTioCg/4HughZgp5kprBQ77NAzwiJwS0Sf5ZPM4tSOAxZv18mw44yYU5gQeaf4KIdo3gybzAxIfdVI16kQd6uhBjXNYbW3gqsgiihZ5BXKLIo8jhsKyIC+5zyASQCfqQSJhSMJtu+g7acolWe+sdzOLA8MLcgxYHk7VgWNS+YlGs19ZCnA8Mo/lIjgoNXrJ8EOck0asFNb+ar0QWWk7eEX/nvAut2jUClyijXrB98RpLAq3fWcxqpyCrtb0p4AeGN5gpUB3bWW+4JvUaPzCO6uFq71vY3TmOYjz5lqe8XcYwt/gMk+dJHlcbWe46j+X+VjLj2tWbj3gZjEx7hcO0hXpBHizraxaP7ccMbJ9aLtQsChl2H7fiTOgrzuJm3aQRLOtq97v0P8bQnEu/KxvHl7dqd6AZ7WQfVcX+YXs9TJcirRRHbUjY7UHeD2O1ZMh6ubHv6+VowH4/KQ+US1hPu2jDQZ+hpyXqsdlXc1qGblVds9jbr3F7+//hfMHKqIxEV0UH7IwjC8nZ9wHS6pDp/CF2lvvgE+uTqxLWP04K9amP6+wZSTLDyicgGuEzZzYSBT6tUAUEGtLszPv2s563sp832Jk3PWJpuTxfMuyUvVQ39XUuO03+8bmvU3VLTJL58q+V6TnUODa+6c7+3zYc1s/+OWj/P8y6qlXI665Zs/8f/gN4lgNt0uBr+gAAAABJRU5ErkJggg==" width=65 height=65 />
</svg>
</div>
<div class=text-container>
<h2>THE
<BR/> PRODUCT</h2>
<h3>My Product is awesome</h3>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
<script>
// Start midnight
$(document).ready(function() {
// Change this to the correct selector.
$('.small-logo-layer').midnight();
});
</script>
<script>
$(document).ready(function() {
$('#wrapper').fullpage({
//Navigation
menu: '.aside-navigation',
lockAnchors: false,
anchors: ['home', 'the-product', 'the-variety', 'the-diet', 'about-us', 'contact-us'],
navigation: false,
navigationPosition: 'left',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 1000,
autoScrolling: false,
fitToSection: false,
fitToSectionDelay: 500,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: false,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: false,
verticalCentered: true,
sectionsColor: ['#ccc', '#fff'],
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: true,
parallaxOptions: {
type: 'cover',
percentage: 30,
property: 'translate'
},
});
});
</script>
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Roboto:300,400,500,900']
}
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
</body>
</html>