如何实现页面滚动到指定高度时修改头部元素的透明度？

1. 修正现有CSS样式 #

你当前的CSS存在重复的position属性，且默认透明度设置不符合顶部透明的需求，修改后代码如下：

.navbar_outline{
    background-color: yellow;
    border-radius: 50px;
    top: 10px;
    width: 1300px;
    height: 70px;
    /* 删掉重复的absolute，保留fixed固定定位 */
    position: fixed;
    margin-left: 35px;
    /* 顶部默认完全透明 */
    opacity: 0;
    /* 添加过渡效果，让透明度变化更平滑，可自定义时长 */
    transition: opacity 0.3s ease;
}

/* 滚动到指定高度后添加的类，透明度50% */
.navbar_outline.scrolled {
    opacity: 50%;
}

2. 添加JS监听滚动事件 #

你需要通过JavaScript监听页面滚动行为，判断滚动距离达到指定阈值后切换导航栏的类名，代码如下：

// 替换为你实际的导航栏选择器，这里用类名选择
const navbar = document.querySelector('.navbar_outline');
// 自定义触发透明度变化的滚动高度，单位为px，可按需修改
const scrollThreshold = 100;

window.addEventListener('scroll', () => {
    if (window.scrollY >= scrollThreshold) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

如果需要调整触发的滚动高度，直接修改scrollThreshold的数值即可；如果要调整透明度变化的速度，修改CSS中transition属性的0.3s为你需要的时长即可。

内容的提问来源于stack exchange，提问作者Hunain Ahmed