我在侧边栏导航中有垂直点导航。每当我滚动到某个部分时，这些点都应该被添加为“活动”类，并且当我将它们悬停在它们上时，它们会以它们的方式显示。我对JS感到很恐怖，所以如果这很简单，请原谅我的无知。这是我的codepen： https://codepen.io/lfi809/pen/dBeKew?editors=1100
我尝试过编辑JS代码并在此处查看其他解决方案
window.DetectDeviceSize = function() {
var t = {
lg: !1,
md: !1,
sm: !1,
xs: !1
};
return $("[class*='device-']").length || $("body").append('<div class="device-xs visible-xs"></div><div class="device-sm visible-sm"></div><div class="device-md visible-md"></div><div class="device-lg visible-lg"></div>'), $("[class*='device-']").each(function(e) {
var a = $(this);
a.is(":visible") && (a.hasClass("visible-lg") && (t.lg = !0), a.hasClass("visible-md") && (t.md = !0), a.hasClass("visible-sm") && (t.sm = !0), a.hasClass("visible-xs") && (t.xs = !0))
}), $("[class*='device-']").length && $("[class*='device-']").remove(), t
}, window.isMobile = function() {
return window.DetectDeviceSize().xs
}, window.isTablet = function() {
return window.DetectDeviceSize().sm
}, window.isApple8 = function() {
return !!/(iPad|iPhone|iPod)/g.test(navigator.userAgent) && !!window.indexedDB
}, window.isApplePad = function() {
return !!/(iPad)/g.test(navigator.userAgent)
};
var lastPushedSection = "",
disableHide = !1,
lastScrollPosition = 0,
scrollDelta = 10,
above25 = !1,
above50 = !1,
above75 = !1,
iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
function setupMOAVideo() {
var e = new Vimeo.Player("moa-video");
e.on("ready", function() {}), e.on("play", function(e) {
! function(e) {
!$("#moa h1").hasClass("disappear") && e.percent < .9 && ($("#moa h1").addClass("disappear"), above25 = above50 = above75 = !1);
.25 <= e.percent && !above25 ? above25 = !0 : .5 <= e.percent && !above50 ? above50 = !0 : .75 <= e.percent && !above75 && (above75 = !0);
omniInputString = "MOA"
}(e)
}), e.on("ended", function(e) {
console.log("ended"), $("#moa .moa-scale h1").removeClass("disappear")
}), $("#vimeo-iphone-thumb, #vimeo-ipad-thumb").click(function() {
$(this).remove(), e.play()
})
}
function adjustNav() {
window.isMobile() || window.isTablet() ? $("nav").addClass("active") : $("nav").removeClass("active")
}
function reveal() {
$(".reveal").not(".revealed").each(function() {
isScrolledIntoView($(this), !0) && $(this).addClass("revealed")
})
}
function scaleFrame() {
var e = Math.floor($("#moa").outerWidth() / 1.850694444444444);
$(".moa-scale iFrame").css("height", e.toString() + "px"), $(".moa-scale").css("height", e.toString() + "px")
}
function setupHistory() {
var a = window.History;
if (!a.enabled) return !1;
a.Adapter.bind(window, "statechange", function() {
var e = a.getState();
$("#content").load(e.url)
})
}
function scrollToLocation(e, a) {
if (null == a && (a = 1500), !(0 <= e.indexOf("#."))) {
var t = -1 == e.indexOf("#") ? $("section[name=" + e.replace("/", "") + "]") : $(e);
if (0 != $(t).length) {
var i = $(t).offset().top;
0 == i && (disableHide = !1), "#isi" == e && (i -= $(window).height() / 2), $("html,body").animate({
scrollTop: i
}, a)
}
}
}
function isScrolledIntoView(e, a) {
var t = $(window).scrollTop(),
i = t + $(window).height(),
n = t + $(window).height() / 2;
if (null == $(e).offset()) return !1;
var s = $(e).offset().top,
o = s + $(e).height();
return a ? s <= i - 20 : s <= n && n <= o
}
function getParameterByName(e) {
e = e.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var a = new RegExp("[\\?&]" + e + "=([^&#]*)").exec(location.search);
return null === a ? "" : decodeURIComponent(a[1].replace(/\+/g, " "))
}
function setCookie(e, a, t) {
var i = new Date;
i.setTime(i.getTime() + 24 * t * 60 * 60 * 1e3);
var n = "expires=" + i.toUTCString();
document.cookie = e + "=" + a + ";path=/;" + n
}
function getCookie(e) {
return 0 < document.cookie.length && (c_start = document.cookie.indexOf(e + "="), -1 != c_start) ? (c_start = c_start + e.length + 1, c_end = document.cookie.indexOf(";", c_start), -1 == c_end && (c_end = document.cookie.length), unescape(document.cookie.substring(c_start, c_end))) : ""
}
function requestcontent(e) {
e = "/controllers/" + e, $.ajax({
url: e,
type: "GET",
success: function(e) {
return e
},
error: function(e) {
return e
}
})
}
function disappearHere() {
var e = !1;
/Android [4-8]/.test(window.navigator.appVersion) && $(":focus").is("input[type=text],input[type=email],input[type=tel]") && (e = !0);
var a = $(window).height() - $("#floating-isi").height(),
t = $(window).scrollTop();
0 < $("#isi").length && ($("#isi").offset().top <= t + a && (e = !0));
e ? $("#floating-isi").addClass("hideISI") : $("#floating-isi").removeClass("hideISI")
}
function manageMobileHeader() {
if (window.isMobile() || window.isTablet()) {
var e = $(window).scrollTop();
Math.abs(lastScrollPosition - e) <= scrollDelta || (lastScrollPosition < e && e > $("header").height() ? ($("header nav").removeClass("show"), $("header").addClass("hideMenu")) : e + $(window).height() < $(document).height() && $("header").removeClass("hideMenu"), lastScrollPosition = e)
}
}
$(window).on("load", function() {
$("body").addClass("loaded"), $("#floating-isi").addClass("start"), $("header").addClass("start"), $("#home").addClass("start"), setupMOAVideo(), iOS && $("body").addClass("ios");
var e = window.location.hash;
0 == e.length && (e = (e = window.location.pathname).substr(e.lastIndexOf("/") + 1)), 0 < e.length && (disableHide = !0), disappearHere(), lastScrollPosition = $(window).scrollTop(), scaleFrame(), adjustNav(), $(".w--tab-active .carousel .slider-dot-1").addClass("active"), $("header").one("webkitanimationend oanimationend msanimationend animationend", function(e) {
$("header").addClass("done")
}), $("#floating-isi").one("webkitanimationend oanimationend msanimationend animationend", function(e) {
$("#floating-isi").addClass("done")
}), $("#model-after").one("webkitanimationend oanimationend msanimationend animationend", function(e) {
$(".intro").removeClass("intro"), setupMOAVideo()
})
}), $(function() {
reveal(), $(window).scroll(function() {
reveal(), $(".section-row").each(function() {
if (null != $(this).attr("name") && isScrolledIntoView($(this))) {
var e = $(this).attr("name"),
a = $(this).attr("aria-title"),
t = $(this).attr("meta"),
i = $(this).attr("metakeywords");
lastPushedSection != e && ("home" == e ? History.pushState("", e, "/") : (History.pushState("", e, "/" + e), requestcontent(e)), lastPushedSection = e), null != a && 0 < a.length && (document.title = a, $("meta[name='description']").attr("content", t), $("meta[name='keywords']").attr("content", i)), $("#main-menu li").removeClass("active"), 0 === $(window).scrollTop() ? $("#main-menu li[name='home']").addClass("active") : $("#main-menu li[name='" + $(this).attr("name") + "']").addClass("active")
}
}), 0 != $(window).scrollTop() && disappearHere(), manageMobileHeader()
}), $(".bna-section .tab-menu-bottom .w-tab-link").click(function() {
$(".w-tab-content .w-tab-pane").css("opacity", ""), $(".w-tab-content .w-tab-pane").css("transition", ""), $(".w-tab-content .w-tab-pane").removeClass("w--tab-active"), $(".bna-section .tab-menu-bottom .w-tab-link").removeClass("w--current"), $(this).addClass("w--current");
var e = $(this).attr("data-w-tab");
e = e.replace("Tab ", ""), $(".w-tab-content .tab-pane-" + e).addClass("w--tab-active"), $(".w-tab-content .tab-pane-" + e).css("opacity", "1"), $(".w-tab-content .tab-pane-" + e).css("transition", "opacity 300ms"), $(".w--tab-active .tabs .tabs-menu .patient-1").click(), jQuery(window).trigger("resize").trigger("scroll"), scrollToLocation("#b-a-container", 500)
}), $(".bna-section .tabs .tabs-menu .w-tab-link").click(function() {
$(".bna-section .tabs .tabs-menu .w-tab-link").removeClass("w--current"), $(".bna-section .tabs .tabs-menu .w-tab-link").css("opacity", ""), $(".bna-section .tabs .tabs-menu .w-tab-link").css("transition", ""), $(".bna-section .tabs .w-tab-content .w-tab-pane").removeClass("w--tab-active"), $(this).addClass("w--current");
var e = $(this).attr("data-w-tab");
e = e.replace("Tab ", ""), $(".bna-section .tabs .w-tab-content .tab-pane-" + e).addClass("w--tab-active"), $(".bna-section .tabs .w-tab-content .tab-pane-" + e).css("opacity", "1"), $(".bna-section .tabs .w-tab-content .tab-pane-" + e).css("transition", "opacity 300ms"), $(".w-slider-dot").removeClass("current").removeClass("active").delay(1e3), $(".w--tab-active .carousel .slider-dot-1").addClass("active"), $(".w--tab-active .carousel").carousel(0), $(".w--tab-active .carousel").carousel("cycle"), jQuery(window).trigger("resize").trigger("scroll"), scrollToLocation("#b-a-container", 500)
}), $(".w-slider-dot").click(function() {
$(".w-slider-dot").removeClass("current"), $(this).addClass("current"), $(".carousel").carousel("pause");
$(this).hasClass("slider-dot-1") || ($(this).hasClass("slider-dot-2") || $(this).hasClass("slider-dot-2"))
}), $(window).resize(function() {
disappearHere(), adjustNav(), scaleFrame()
}), $("#see-more").click(function() {
scrollToLocation("#isi")
}), $("#btn-menu").click(function() {
$("nav").toggleClass("show")
}), $("header nav, #home-logo").hover(function() {
$("#get-samples-mobile").is(":visible") || $("header").hasClass("intro") || ($("header").addClass("active"), $("header nav").addClass("active"))
}), $("#body, #transparent-padding").hover(function() {
$("#get-samples-mobile").is(":visible") || ($("header").removeClass("active"), $("#get-samples-mobile").is(":visible") || $("header nav").removeClass("active"))
}), $("#body").click(function() {
$("header").removeClass("active"), adjustNav()
}), $("nav a, #get-samples-mobile, #home-logo").click(function(e) {
$("#get-samples-mobile").is(":visible") && ($("header nav").removeClass("show"), $("header").addClass("hideMenu"));
var a = "";
a = "/" == $(this).attr("href") ? "home" : $(this).attr("href").replace("#", "").replace("/", ""), 1 == $("section[name='" + a + "']").length && ($("#get-samples-mobile").is(":visible") || $("header nav").removeClass("active"), $("header").removeClass("active"), scrollToLocation(a), e.preventDefault())
})
});
当我滚动到某个部分时，我希望将点导航显示在将鼠标悬停在带有绿色边框的导航项目上时的样子