我是一名初級程式員，我正在嘗試創建這種效果，當我滾動經過 HTML 中的特定元素時，導航欄中按鈕的顏色會改變顏色。我認為這樣做的正確方法是 jQuery。我在獲取頁面中元素的位置時遇到問題。我已經嘗試過 position() 和 offset() 方法。但兩者似乎都不起作用。
我想獲得 ID 為“資訊”和“安全”的元素的垂直位置。我有這些方法在某些情況下不是很可靠，但我找不到替代方法。
這是我到目前為止的代碼：
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$( window ).scroll(function() {
if (window.loaded == true){
var scrollTop = $(window).scrollTop();
var infopos = $( "#info" );
var secpos = $("#security");
if (scrollTop >= 0 && scrollTop < infopos-25) {
$( "#navgeneral" ).addClass("active");
$( "#navinfo" ).removeClass("active");
$( "#navsecurity" ).removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$( "#navgeneral" ).removeClass("active");
$( "#navinfo" ).addClass("active");
$( "#navsecurity" ).removeClass("active");
}
}
});`
提前謝謝你的建議！！
uj5u.com熱心網友回復：
提到的目標是讓 NAV 欄根據您滾動到的位置而變化。首先，您需要獲取目標 ID 滾動位置。使用下面的代碼獲取每個 archor 元素 ID：
$('#testB').position().top
（在 jQuery 中，position 會回傳 left 和 top 值，這里我們只使用 top。） 其次，獲取當前滾動位置。使用下面的代碼：
currentHeight = $(window).scrollTop();
第三，撰寫相關的jQuery代碼來改變NAV元素。示例JS如下： 這里我們有5個DIV（#testA到E）和4個導航按鈕（#test1到4）
$(window).scroll(function () {
var currentHeight = $(window).scrollTop();
if (currentHeight <= $('#testB').position().top) {
$("#test1").addClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testC').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").addClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testD').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").addClass('active-blue');
$("#test4").removeClass('active-blue');
} else {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").addClass('active-blue');
}
});
uj5u.com熱心網友回復：
干得好。
//Declare these first
const infopos = $( "#info" ).scrollTop();
const secpos = $("#security").scrollTop();
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$( window ).scroll(function() {
if (window.loaded === true){
let scrollTop = $(window).scrollTop();
if (scrollTop < infopos-25) { //scrollTop >= 0 will always be true so skip it
$( "#navgeneral" ).addClass("active");
$( "#navinfo" ).removeClass("active");
$( "#navsecurity" ).removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$( "#navgeneral" ).removeClass("active");
$( "#navinfo" ).addClass("active");
$( "#navsecurity" ).removeClass("active");
}
}
});`
首先要很好地理解變數的作業原理，并在宣告變數時盡量使用let而不是var大部分時間。這將防止意外覆寫全域變數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326178.html
標籤：javascript html 查询 css