在向上或向下滚动时删除单击项目的活动状态

Question

在为我的问题寻找了几天的解决方案后，我运气不佳决定在这里写一篇文章。我目前正在建立一个一页的网站与html&css&jquery。当我向上或向下滚动时，我的菜单工作得很好。当我点击菜单链接进入所需部分时，它也会起作用。当我向下或向上滚动一个部分，并且活动类停留在单击的菜单链接上时，就会出现问题。

这是我的页面的一个例子

$(document).ready(function() {
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on("resize scroll", function() {
$("section.subpage").each(function() {
var activeSections = $(this).attr("id");
if ($("section[id=" + activeSections + "]").isInViewport()) {
$("#menu-" + activeSections).addClass("active").siblings().removeClass("active").removeAttr("class");
} else {
$("#menu-" + activeSections).removeAttr("class");
}
});
});

function scrollThere(targetElement, speed) {
$("html, body")
.stop()
.animate({
scrollTop: targetElement.offset().top
}, 900, "swing");
}
$("#main-menu li a").on("click", function(e) {
e.preventDefault();
var startOfName = $(this).attr("href").indexOf("#"),
clickRef = $(this)
.attr("href")
.slice(startOfName + 1),
targetEl = $("section[id=" + clickRef + "]");
scrollThere(targetEl, 900);
});
$(window).on("mousewheel", function(e) {
var div1y = $("#superLeague").offset().top,
div2y = $("#premierLeague").offset().top,
div3y = $("#leagueOne").offset().top,
div4y = $("#leagueTwo").offset().top,
lastScrollTop = $(this).scrollTop(),
scrollDirection,
targetUp,
targetDown,
targetElement;
if (e.deltaY > 0) {
scrollDirection = "up";
} else if (e.deltaY <= 0) {
scrollDirection = "down";
}
e.preventDefault();
if (lastScrollTop === div1y) {
targetUp = $("#superLeague");
targetDown = $("#premierLeague");
} else if (lastScrollTop === div2y) {
targetUp = $("#superLeague");
targetDown = $("#leagueOne");
} else if (lastScrollTop === div3y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop === div4y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop < div2y) {
targetUp = $("#superLeague");
targetDown = $("#premierLeague");
} else if (lastScrollTop < div3y) {
targetUp = $("#premierLeague");
targetDown = $("#leagueOne");
} else if (lastScrollTop < div4y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop > div4y) {
targetUp = $("#leagueTwo");
targetDown = $("#leagueTwo");
}
if (scrollDirection === "down") {
targetElement = targetDown;
} else if (scrollDirection === "up") {
targetElement = targetUp;
}
scrollThere(targetElement, 900);
});
});

body,
html {
margin: 0;
padding: 0;
}
#navbar {
width: 100%;
height: 40px;
margin: 0 auto;
background: #000;
position: fixed;
top: 0;
}
#main-menu {
margin: 0;
}
#main-menu li {
list-style: none;
display: inline-block;
}
#main-menu.active {
background: #ba0032;
}
#main-menu li a {
color: #fff;
font-family: inherit;
font-size: 14px;
text-decoration: none;
line-height: 40px;
display: inline-block;
padding: 0px 40px;
}
#main-menu li a:hover,
#main-menu li a:focus,
#main-menu li.active {
background: #ba0032;
}
.subpage {
height: 100vh;
width: 100%;
background-color: #f7f7f7;
overflow: hidden;
padding: 15px;
margin: 0 auto;
}
.subpage h2 {
color: #ba0032;
text-align: center;
margin-top: 50px;
}
.subpage p {
text-align: center;
display: block;
width: 80%;
margin: 0 auto;
}
.subpage:nth-child(even) {
background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>

<div class="container">
<nav id="navbar">
<ul id="main-menu">
<li id="menu-superLeague"><a href="#superLeague">Super League</a>
</li>
<li id="menu-premierLeague"><a href="#premierLeague">Premier League</a>
</li>
<li id="menu-leagueOne"><a href="#leagueOne">League One</a>
</li>
<li id="menu-leagueTwo"><a href="#leagueTwo">League Two</a>
</li>
</ul>
</nav>

<section id="superLeague" class="subpage">
<h2>
Super League
</h2>
<p>
Authoritatively network high-quality initiatives for functional opportunities. Globally envisioneer pandemic metrics vis-a-vis flexible e-markets. Rapidiously integrate cooperative systems whereas flexible communities. Assertively formulate high-payoff
"outside the box" thinking whereas cross functional methodologies. Enthusiastically redefine multifunctional convergence rather than interdependent mindshare.
</p>
</section>
<section id="premierLeague" class="subpage">
<h2>
Premier League
</h2>
<p>Seamlessly impact multidisciplinary sources for covalent bandwidth. Globally maintain premier action items rather than team building expertise. Conveniently underwhelm resource-leveling value before customer directed results. Seamlessly integrate
superior functionalities rather than market-driven materials. Energistically evolve ethical web services and 24/7 partnerships. </p>
</section>
<section id="leagueOne" class="subpage">
<h2>
League One
</h2>
<p>
Distinctively visualize optimal benefits for fully researched e-markets. Assertively integrate B2B expertise whereas flexible action items. Enthusiastically orchestrate virtual convergence without bricks-and-clicks content. Rapidiously streamline goal-oriented
benefits and web-enabled leadership skills. Completely architect an expanded array of intellectual capital before real-time portals.
</p>
</section>
<section id="leagueTwo" class="subpage">
<h2>
League 2
</h2>
<p>
Quickly coordinate user-centric platforms via seamless e-services. Dynamically redefine value-added infomediaries with standards compliant convergence. Competently productivate functionalized e-services without standardized core competencies. Credibly
leverage other's orthogonal e-markets via diverse content. Dramatically synergize robust supply chains and future-proof internal or "organic" sources.
</p>
</section>
</div>

希望有人能帮我解决这个问题。

Answer 1

我认为问题是每个li中的<a>在单击后可能会被聚焦，所以我在代码中添加了$("#menu-" + activeSections +" a").blur();。

$("section.subpage").each(function() {
var activeSections = $(this).attr("id");
if ($("section[id=" + activeSections + "]").isInViewport()) {
$("#menu-" + activeSections).addClass("active").siblings().removeClass("active").removeAttr("class");
} else {
$("#menu-" + activeSections).removeAttr("class");
$("#menu-" + activeSections +" a").blur();
}
});

演示

$(document).ready(function() {
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on("resize scroll", function() {
$("section.subpage").each(function() {
var activeSections = $(this).attr("id");
if ($("section[id=" + activeSections + "]").isInViewport()) {
$("#menu-" + activeSections).addClass("active").siblings().removeClass("active").removeAttr("class");
} else {
$("#menu-" + activeSections).removeAttr("class");
$("#menu-" + activeSections +" a").blur();
}
});
});

function scrollThere(targetElement, speed) {
$("html, body")
.stop()
.animate({
scrollTop: targetElement.offset().top
}, 900, "swing");
}
$("#main-menu li a").on("click", function(e) {
e.preventDefault();
var startOfName = $(this).attr("href").indexOf("#"),
clickRef = $(this)
.attr("href")
.slice(startOfName + 1),
targetEl = $("section[id=" + clickRef + "]");
scrollThere(targetEl, 900);
});
$(window).on("mousewheel", function(e) {
var div1y = $("#superLeague").offset().top,
div2y = $("#premierLeague").offset().top,
div3y = $("#leagueOne").offset().top,
div4y = $("#leagueTwo").offset().top,
lastScrollTop = $(this).scrollTop(),
scrollDirection,
targetUp,
targetDown,
targetElement;
if (e.deltaY > 0) {
scrollDirection = "up";
} else if (e.deltaY <= 0) {
scrollDirection = "down";
}
e.preventDefault();
if (lastScrollTop === div1y) {
targetUp = $("#superLeague");
targetDown = $("#premierLeague");
} else if (lastScrollTop === div2y) {
targetUp = $("#superLeague");
targetDown = $("#leagueOne");
} else if (lastScrollTop === div3y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop === div4y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop < div2y) {
targetUp = $("#superLeague");
targetDown = $("#premierLeague");
} else if (lastScrollTop < div3y) {
targetUp = $("#premierLeague");
targetDown = $("#leagueOne");
} else if (lastScrollTop < div4y) {
targetUp = $("#leagueOne");
targetDown = $("#leagueTwo");
} else if (lastScrollTop > div4y) {
targetUp = $("#leagueTwo");
targetDown = $("#leagueTwo");
}
if (scrollDirection === "down") {
targetElement = targetDown;
} else if (scrollDirection === "up") {
targetElement = targetUp;
}
scrollThere(targetElement, 900);
});
});

body,
html {
margin: 0;
padding: 0;
}
#navbar {
width: 100%;
height: 40px;
margin: 0 auto;
background: #000;
position: fixed;
top: 0;
}
#main-menu {
margin: 0;
}
#main-menu li {
list-style: none;
display: inline-block;
}
#main-menu.active {
background: #ba0032;
}
#main-menu li a {
color: #fff;
font-family: inherit;
font-size: 14px;
text-decoration: none;
line-height: 40px;
display: inline-block;
padding: 0px 40px;
}
#main-menu li a:hover,
#main-menu li a:focus,
#main-menu li.active {
background: #ba0032;
}
.subpage {
height: 100vh;
width: 100%;
background-color: #f7f7f7;
overflow: hidden;
padding: 15px;
margin: 0 auto;
}
.subpage h2 {
color: #ba0032;
text-align: center;
margin-top: 50px;
}
.subpage p {
text-align: center;
display: block;
width: 80%;
margin: 0 auto;
}
.subpage:nth-child(even) {
background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>

<div class="container">
<nav id="navbar">
<ul id="main-menu">
<li id="menu-superLeague"><a href="#superLeague">Super League</a>
</li>
<li id="menu-premierLeague"><a href="#premierLeague">Premier League</a>
</li>
<li id="menu-leagueOne"><a href="#leagueOne">League One</a>
</li>
<li id="menu-leagueTwo"><a href="#leagueTwo">League Two</a>
</li>
</ul>
</nav>

<section id="superLeague" class="subpage">
<h2>
Super League
</h2>
<p>
Authoritatively network high-quality initiatives for functional opportunities. Globally envisioneer pandemic metrics vis-a-vis flexible e-markets. Rapidiously integrate cooperative systems whereas flexible communities. Assertively formulate high-payoff
"outside the box" thinking whereas cross functional methodologies. Enthusiastically redefine multifunctional convergence rather than interdependent mindshare.
</p>
</section>
<section id="premierLeague" class="subpage">
<h2>
Premier League
</h2>
<p>Seamlessly impact multidisciplinary sources for covalent bandwidth. Globally maintain premier action items rather than team building expertise. Conveniently underwhelm resource-leveling value before customer directed results. Seamlessly integrate
superior functionalities rather than market-driven materials. Energistically evolve ethical web services and 24/7 partnerships. </p>
</section>
<section id="leagueOne" class="subpage">
<h2>
League One
</h2>
<p>
Distinctively visualize optimal benefits for fully researched e-markets. Assertively integrate B2B expertise whereas flexible action items. Enthusiastically orchestrate virtual convergence without bricks-and-clicks content. Rapidiously streamline goal-oriented
benefits and web-enabled leadership skills. Completely architect an expanded array of intellectual capital before real-time portals.
</p>
</section>
<section id="leagueTwo" class="subpage">
<h2>
League 2
</h2>
<p>
Quickly coordinate user-centric platforms via seamless e-services. Dynamically redefine value-added infomediaries with standards compliant convergence. Competently productivate functionalized e-services without standardized core competencies. Credibly
leverage other's orthogonal e-markets via diverse content. Dramatically synergize robust supply chains and future-proof internal or "organic" sources.
</p>
</section>
</div>