[英]JQuery position() and offset() methods not working
我是一名初级程序员,我正在尝试创建这种效果,当我滚动浏览 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");
}
}
});`
提前谢谢你的建议!!
提到的目标是让 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');
}
});
干得好。
//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
来防止意外覆盖全局变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.