Javascript 更改页面滚动上的导航栏背景色

当我滚动页面时，我很难让固定顶部导航栏更改背景颜色

以下是JS中的函数：

$(document).ready(function(){       
    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 
            scroll_start = $(this).scrollTop();
            if(scroll_start > offset.top) {
                $(".navbar").css('background-color', '#f0f0f0');
            } else {
                $('.navbar').css('background-color', 'transparent');
            }
        });
    }
 });

这是一个名为“

custom.js

”的文件，在我加载

bootstrap和jquery

后加载到页面底部（

custom.js

与

index.html

位于同一文件夹中）

---

这是当前函数和css在具有

且

id=startchange

的页面上执行的操作。页面加载时，导航栏不透明。滚动导航栏后，导航栏立即变为透明（边框仍然可见），并且带有

id=startchange

的

通过页面顶部后，导航栏再次变为不透明

如果你让你的css更具体，你可以让导航栏变得透明，一开始就没有边框（在大屏幕上，你可能也想看看它是如何为小屏幕设计的）

$（文档）.ready（函数（）{
var scroll_start=0；
var startchange=$（“#startchange”）；
var offset=startchange.offset（）；
if（起始更改长度）{
$（文档）。滚动（函数（）{
scroll_start=$（文档）.scrollTop（）；
如果（滚动开始>偏移量顶部）{
$（“.navbar”）.css（'background-color'，'#f0'）；
}否则{
$（'.navbar'）.css（'background-color'，'transparent'）；
}
});
}
});
.navbar.navbar-default.navbar-fixed-top{
背景色：透明；
边框颜色：透明；
-webkit转换：背景色2s；/*Safari*/
过渡色：背景色2s；
}
.navbar切换：悬停，.navbar默认值。navbar切换：焦点{
背景色：透明！重要；
}

切换导航









页首



































































开始更改分区


















































页面底部
根据需要更改值50，
50px
是滚动后的页面位置

$(document).ready(function () {
                    $(window).scroll(function () {
                        if ($(window).scrollTop() >= 50) {
                            $(".navbar").css("background-color", "#222");
                        } else {
                            $(".navbar").css("background-color", "transparent");
                        }
                    });
                });

这样很容易,

let blackToRed = [0,0,0,1];
$(document).ready(function(){
    $(document).scroll(function() {
        blackToRed[0] = window.scrollY;
        $("#item").css('color', 'rgba(' + blackToRed + ')');
    });
});

HTMLS中没有id为
startchange
id的dom元素，因此我需要将该id添加到导航栏？？就在文档中的某个地方，页面顶部没有的是什么？您能演示这样的标记是什么样子吗？我以前没有在html中使用ID。谢谢添加ID的方式与添加类的方式几乎相同，但是使用
ID
而不是
class
只是想对所有帮助表示感谢。你的解释正是我需要的。我有一个跟进：有没有办法让颜色“淡入”呢？非常简单，请查看上面我的答案css部分。我已经将转换添加到css中。这为css属性的任何更改设置了一个转换时间（本例中背景颜色需要2秒）。这正是我想要的，而你做得很简单。非常感谢你！
$(document).ready(function () {
                    $(window).scroll(function () {
                        if ($(window).scrollTop() >= 50) {
                            $(".navbar").css("background-color", "#222");
                        } else {
                            $(".navbar").css("background-color", "transparent");
                        }
                    });
                });

let blackToRed = [0,0,0,1];
$(document).ready(function(){
    $(document).scroll(function() {
        blackToRed[0] = window.scrollY;
        $("#item").css('color', 'rgba(' + blackToRed + ')');
    });
});