我有一个带有固定菜单按钮的单页网站,该网站有多个部分:
<div class="fullscreen sec-1"></div>
<div class="fullscreen sec-2"></div>
<div class="fullscreen sec-3"></div>
默认情况下,按钮的文本为白色,因为第一个 div 的背景颜色为黑色。第二个和第三个的颜色是白色,所以我希望当滚动到达第二个 div 的顶部时,按钮文本的颜色变为黑色。我已经设法通过 if else 实现了这一点,但是高度是固定的,所以当它在移动设备上时,结果是不同的,因为 div 的高度都是 100% 全屏。我将代码更改为:
$(document).ready(function() {
var button = $(".sec-1");
var offset = button.offset();
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".menu-button").css("color","black");
} else {
$(".menu-button").css("color","white");
}
});
});
});
目前我运气不好,我正在努力寻找一个例子来引用,所以如果有人能帮助我或指出正确的方向,我将不胜感激。
最佳答案
.offset() returns an object containing the properties top and left.
并且您应该检查 .sec-2
而不是 .sec-1
尝试类似的东西
$(document).ready(function() {
var button = $(".sec-2"); //get offset of second div
var offset = button.offset().top; //check for top property
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= offset) {
$(".menu-button").css("color","black");
} else {
$(".menu-button").css("color","white");
}
});
});
});
关于javascript - jQuery 根据滚动位置更改元素的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47778221/