我有一个网页，有5个不同颜色的面板。页面右侧有导航项目符号。
滚动页面时，我希望每个部分都与导航项目符号链接。 Bullet应该具有active类，具体取决于视口上显示的幻灯片。
任何帮助都将不胜感激。
答案 0 :(得分：0)
我已经在我的本地使用了你的代码并在JS下面应用了，然后它工作正常。
只需在项目中添加Scrollit.Js即可。
只需要对CSS文件进行微小的更改，如下所示。
在CSS文件行中没有。 ＃55
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.js--active {
background: #f5f5f1;
opacity: 1;
}
只需将其替换为
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.active {
background: #f5f5f1;
opacity: 1;
}
它会像你想要的那样正常工作。每个部分都会在您的<a>代码中应用有效课程。
答案 1 :(得分：0)
我对您的代码进行了一些更改，以便在点击时滚动到div。对于onscroll高亮显示，请使用scrollspy.js或使用bootstrap导航。 我个人建议你使用bootstrap。
<body class="page-loaded">
<div id="page" class="hfeed site full-height">
<div class="page-wrap full-height">
<div class="main full-height" role="main">
<div id="" class="content full-height">
<div class="parallax_boxs">
<div id="black" class="parallax_box">
<div class="parallax_box_inner parallax_box_inner_box1">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="1">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="1">
<video loop="" autoplay="" id="video--1" poster="/assets/video/quizup-poster.jpg">
<source src="video/boostyourearnings.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
fhffdhfd
</div>
<div class="pbox_right">
<h3>rehr</h3>
<p>fshrsh <a target="_blank" class="link--invisible" href="https://fueled.com/android-app-design">Android app</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div id="green" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box2">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="2">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="2">
<video loop="" autoplay="" id="video--2" poster="/assets/video/sunnycomb-poster.jpg">
<source src="video/engageyourfanbase.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
xvdshdsh
</div>
<div class="pbox_right">
<h3>resheh</h3>
<p>rehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="blue" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box3">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="3">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="3">
<video loop="" autoplay="" id="video--3" poster="/assets/video/afterlight-poster.jpg">
<source src="video/showcaseyourvideosfirst.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
sgagash
</div>
<div class="pbox_right">
<h3>Trhr</h3>
<p>shsh</p>
</div>
</div>
</div>
</div>
</div>
<div id="grey" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box4">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="4">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="4">
<video loop="" autoplay="" id="video--4" poster="/assets/video/keyme-poster.jpg">
<source src="video/trackwhatyouredoing.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
eaheheh
</div>
<div class="pbox_right">
<h3>shdh</h3>
<p>srehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="red" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box5">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="5">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="5">
<video loop="" autoplay="" id="video--5" poster="/assets/video/athlete-minder-poster.jpg">
<source src="video/youcalltheshots.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
ehwhewhewh
</div>
<div class="pbox_right">
<h3>Cdxhrhs</h3>
<p>fdh</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax_nav">
<a id="black-btn" href="#black" class="js--active">Link</a>
<a id="green-btn" href="#green" >Link</a>
<a id="blue-btn" href="#blue" >Link</a>
<a id="grey-btn" href="#grey" >Link</a>
<a id="red-btn" href="#red" >Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
的Javascript
$(document).ready(function(){
$('#green-btn').on('click',function(){
$('#green-btn').addClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#black-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').addClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#blue-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').addClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#grey-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').addClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#red-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').addClass("js--active");
});
});