下拉滚动实现导航栏字体变色

要实现导航栏字体在页面下拉滚动时变色，你可以使用JavaScript或jQuery来监听页面的滚动事件，并根据滚动的位置动态改变导航栏字体的颜色。以下是一个简单的实现示例，这里使用原生JavaScript：

// 获取导航栏元素
var navbar = document.getElementById('navbar');

// 设置默认的字体颜色
navbar.style.color = 'black'; // 或者具体的颜色值，如'#333'

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 判断页面滚动的距离，可以根据需要调整这个数值
    if (window.scrollY > 100) {
        // 当滚动距离超过100px时，改变字体颜色
        navbar.style.color = 'white'; // 滚动时的颜色
    } else {
        // 否则恢复默认颜色
        navbar.style.color = 'black';
    }
});

确保你的HTML中导航栏有一个对应的ID，比如<nav id="navbar">...</nav>。

如果你更倾向于使用jQuery，代码会更加简洁：

$(window).on('scroll', function() {
    var navbar = $('#navbar');
    if ($(this).scrollTop() > 100) {
        navbar.css('color', 'white');
    } else {
        navbar.css('color', 'black');
    }
});

记得在使用jQuery之前，确保已经在页面中引入了jQuery库。

这段代码的基本逻辑是：当用户向下滚动页面超过指定像素（在这个例子中是100px）时，导航栏的字体颜色就会改变；当用户回到页面顶部或者未达到这个滚动阈值时，字体颜色又会恢复成默认颜色。你可以根据自己的设计需求调整滚动阈值和颜色。