【发布时间】：2018-07-31 22:02:31
【问题描述】：
我正在尝试在我的网站上创建一个侧导航，将“活动”类添加到它的四个按钮中，但我似乎无法使其正常工作。
我已经成功地将航路点添加到代码中，但它们似乎总是有点偏离，并且需要用户进行一些额外的滚动才能激活航路点。我也尝试遵循文档中的 {offset} 规则，但没有遮掩。它们要么自始至终停止正常工作，要么自始至终停止正常工作。
为了使 sidenav 工作，我将页面拆分为列，如下面的 CSS 所示。随意提供有关代码的见解，因为这是一个学习练习，我知道我的代码目前很脏（尤其是 Javascript）
侧面导航：
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
<a href="#portfolio" onclick="clickTwo()" class="link2">02</a>
</li>
<li class="side-link">
<a href="#what-we-do" onclick="clickThree()" class="link3">03</a>
</li>
<li class="side-link">
<a href="#contact" onclick="clickFour()" class="link4">04</a>
</li>
</ul>
</div>
CSS：
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
我的 JS 乱七八糟（每个部分都在下面声明）：
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
到目前为止我已经尝试过：
偏移：底部视图（部分有时太大，因此保留旧的活动元素）
偏移量：+/- x%（这从一端解决了问题，但不是从另一端解决了问题：我可以在链接上从 1 变为 4 并且它有效，但 4 到 1 被破坏，反之亦然）
欢迎任何和所有建议/提示。我正在尝试使用每个部分的活动项来模仿引导导航栏的行为。
【问题讨论】：
-
请在您的问题中添加代码 sn-p
标签： javascript jquery materialize jquery-waypoints