Question

我要立刻切入追逐，基本上我希望我的标题从透明（css中没有背景属性）转到滚动时有background-color白色。

我正在使用这个JavaScript而没有到达任何地方。

$(window).scroll(function() {
    var changeNav = 'rgba(0, 0, 0, 0.36)'
    if ($(window).scrollTop() > 200) {
        changeNav = '#ffffff';
    }
    $(.header).css('background-color', changeNav);
});

另外，有没有办法可以让它重新回归？所以我位于页面的底部，标题的白色为background-color，但是当我进入顶部时，JavaScript会将属性输出？我一直在玩和搜索但找不到任何东西。

注意：我从Stack Overflow上的其他地方获得了这段JavaScript，here

非常感谢

Answer 1

<强> jsBin demo

$(.header)应为$(".header")

您的脚本也可以“简化”为：

$(window).scroll(function() {
    var scrolled = $(this).scrollTop() > 200;
    $(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)");
});

注意以上将在每个滚动上强制 .header背景颜色更改（甚至从#fff到#fff）。利用并确保即使用户调整窗口大小也能确保您拥有正确的颜色：

$( function () { // DOM ready to be manipulated

   var $header = $(".header"); // Cache elements for intensive actions
   $(window).on("scroll resize", function() {
       if($(this).scrollTop() > 200){
           $header.css('background-color', "#fff" );
       }else{
           $header.css('background-color', "rgba(0, 0, 0, 0.36)" );
       }
   });

});

Ofc，请告诉你，你已经在你文档的<head>中包含了jQuery库：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

滚动时更改标题的颜色

1 个答案: