在开发网站上，我从Codyhouse tutorial获取了固定的垂直导航，并且第二个导航已固定（水平）到页面顶部。
我希望以下代码应用＆＃34; .active＆＃34;单击时选择器到两个菜单项。此时我只能在一个或另一个上同时工作（所以如果我注释掉一个菜单，那么另一个菜单将应用.active选择器）。
JS
$(document).ready(function($) {
var contentSections = $('.slide'),
navigationItems = $('.nav a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//scroll top
$('.scrollToTop').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('.nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('active'); // for the main menu
} else {
navigationItems.eq(activeSection).removeClass('active');
}
});
}
// sets scroll for mobi height
function smoothScroll(target, time) {
var margin = ($('.primary-nav').outerHeight(true));
if (!time) {
time = '1500';
}
//sets scroll for desktop height
if ($(window).width() > 785) {
$('html,body').animate({
'scrollTop': target.offset().top
}, time);
} else {
$('html,body').animate({
scrollTop: target.offset().top - margin
}, time);
}
}
});
HTML
<nav class="nav">
<ul class="primary-nav">
<li><a href="#slide01" data-number="1">Intro</a></li>
<li><a href="#slide02" data-number="2">Portfolio</a></li>
<li><a href="#slide03" data-number="3">About</a></li>
<li><a href="#slide04" data-number="4">Services</a></li>
<li><a href="#slide05" data-number="5">News</a></li>
<li><a href="#slide06" data-number="6">Contact</a></li>
</ul>
</nav>
<nav class="nav">
<ul class="dot-nav">
<li class="dot-charm" title="Intro"><a href="#slide01" data-number="1"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li>
<li class="dot-charm" title="Portfolio"><a href="#slide02" data-number="2"><span class="nav-dot"></span><span class="nav-label">Portfolio</span></a></li>
<li class="dot-charm" title="About"><a href="#slide03" data-number="3"><span class="nav-dot"></span><span class="nav-label">About</span></a></li>
<li class="dot-charm" title="Services"><a href="#slide04" data-number="4"><span class="nav-dot"></span><span class="nav-label">Services</span></a></li>
<li class="dot-charm" title="News"><a href="#slide05" data-number="5"><span class="nav-dot"></span><span class="nav-label">News</span></a></li>
<li class="dot-charm" title="Contact"><a href="#slide06" data-number="6"><span class="nav-dot"></span><span class="nav-label">Contact</span></a></li>
</ul>
</nav>
<section id="slide01" class="slide"></section>
<section id="slide02" class="slide"></section>
<section id="slide03" class="slide"></section>
<section id="slide04" class="slide"></section>
<section id="slide05" class="slide"></section>
<section id="slide06" class="slide"></section>
CSS
/*Horizontal Nav*/
.primary-nav {
position: absolute;
top: 100%;
bottom: auto;
transform: translateY(-200%);
transition: transform .3s;
right: 0;
text-align: left;
display: block;
width: 100%;
padding: 0 30px 20px;
background: #FECD04
}
.primary-nav.is-visible {
transform: translateY(0);
transition: transform .3s
}
.primary-nav li {
display: block;
margin-left: 0
}
.primary-nav a {
display: inline-block;
color: #383838;
font-weight: 700;
padding: 17px 0;
width: 100%
}
.primary-nav a:hover {
color: grey
}
/*Vert Nav*/
#nav-dots {
position: fixed;
right: 50px;
top: 50%;
transform: translateY(-50%);
text-align: right;
z-index: 100
}
#nav-dots a {
display: block;
line-height: 25px;
position: relative;
padding-right: 20px;
color: #FECD04;
text-decoration: none
}
#nav-dots a:hover .nav-label {
transform: translateX(0);
opacity: 1;
visibility: visible
}
#nav-dots nav {
position: absolute;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1
}
#nav-dots .dot-charm {
background: transparent;
border-bottom: 0;
border-left: 0;
border-radius: 0;
border-right: 12px solid #FECD04;
height: 8%;
margin: 0;
min-height: 20px;
opacity: .1;
width: 14px
}
#nav-dots .nav-label {
display: block;
opacity: .5;
visibility: hidden;
transform: translateX(-10px);
transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67)
}
/*Sections*/
.slide {
padding: 80px 15px;
position: relative
}
我已经注意到这个问题已被问到before但是我尝试了那里建议的所有内容并且无处可去。
对此的任何帮助都将非常感谢。
答案 0 :(得分：0)
所以我想出了以下内容，它对我有用。
$(document).ready(function($) {
var contentSections = $('.slide'),
navigationItems = $('.nav a');
dotNavigationItems = $('.dot-nav a');
updateNavigation();
updateSecondNavigatioin();
$(window).on('scroll', function() {
updateNavigation();
updateSecondNavigatioin();
});
//smooth scroll to the section
navigationItems.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//scroll top
$('.scrollToTop').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('.nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('active'); // for the main menu
} else {
navigationItems.eq(activeSection).removeClass('active');
}
});
}
function updateSecondNavigatioin() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('.dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
dotNavigationItems.eq(activeSection).addClass('selected'); // for the second menu
} else {
dotNavigationItems.eq(activeSection).removeClass('selected');
}
});
}
// sets scroll for mobi height
function smoothScroll(target, time) {
var margin = ($('.primary-nav').outerHeight(true));
if (!time) {
time = '1500';
}
//sets scroll for desktop height
if ($(window).width() > 785) {
$('html,body').animate({
'scrollTop': target.offset().top
}, time);
} else {
$('html,body').animate({
scrollTop: target.offset().top - margin
}, time);
}
}
});