使用JS脚本实现网站滚动时Banner背景色/背景图切换问题求助

现有代码问题汇总 #

• JS语法错误：缺少jQuery选择器标识$和css()方法调用，同时存在多余的闭合括号，导致脚本无法正常执行
• 重复引入jQuery库：页面同时引入了jQuery 1.11.1和3.5.1两个版本，会产生功能冲突
• 样式配置缺失：.banner类未设置初始透明背景，也没有过渡动画配置，颜色切换会非常生硬

修复步骤 #

1. 调整HTML代码 #

删除head标签内的旧版jQuery引入，仅保留body底部的jQuery 3.5.1版本即可，修改后head部分代码：

<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8"> 
<title>Tellus Chocolade</title>
</head>

2. 调整CSS代码 #

修改.banner类样式，新增初始背景和过渡效果：

.banner {
    display: table;
    clear: both;
    position: fixed;
    font-size: 1vw;
    color: #333955;
    font-family: "Garisman Studio FreudianTwo";
    width: 100%;
    z-index: 99;
    align-content: center;
    overflow: auto; 
    /* 新增以下两行配置 */
    background: transparent;
    transition: background 0.3s ease;
}

3. 替换JS滚动逻辑代码 #

将原有错误的滚动监听代码替换为以下内容，滚动事件直接绑定window即可覆盖全页面滚动场景：

$(function() {
    $(window).scroll(function() { 
        const scroll_pos = $(this).scrollTop();
        // 滚动阈值20可自行调整，数值越大触发切换需要滚动的距离越远
        if(scroll_pos > 20) {
           $(".banner").css('background-color', 'blue');
           // 后续扩展背景图切换可替换为以下代码
           // $(".banner").css('background-image', 'url(自定义背景图路径)');
        } else {
           $(".banner").css('background-color', 'transparent');
        }
    });
});

内容的提问来源于stack exchange，提问作者PIeter Jan Schuurmans