Question

在我们的网站中，我试图更改滚动条上标头的背景颜色，但没有获得任何特定于该滚动操作的id或类。

请在下面找到URL： http://indemortgage.staging.wpengine.com/

请回复我的解决方法

已经尝试了以下代码：

 //PasswordAuthenticator
{
    "name": "Cluster PasswordAuthenticator", // auth methods
    "contactPoints": ["xxx.xxx.xx.x", "xxx.xxx.xx.x"], // seed_provider -> seeds from your cassandra.yml
    "hosts": ["xxx.xxx.xx.x"], // your host address
    "authProvider": {
        "class": "PasswordAuthenticator",
        "username": "abc", // host username
        "password": "****" // host password
    }
}

我希望相关ID或类在滚动时更改背景颜色。

Answer 1

您网站的标题不是class。所以你可以删除（点）并在jQuery中添加标题 jquery

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $("header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $("header").removeClass("active");
        }
    });
});

css

header.active{
background-color:red;
}

Answer 2

我检查了您的可共享链接，并观察到页面滚动中已经在标题上添加了一个类，并在滚动顶部将其也删除了。在不滚动的情况下，将此类添加到您的标头中的“标题不粘贴”，而在滚动时将此类添加到您的标题中。因此，您可以轻松地使用这两个类来应用CSS，希望对您有帮助。

Also, you have used the wrong class name to add and remove class, you need to remove "." from the header and make it an element because on your website there is no "header" class to your header element. Try the below code


$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $("header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $("header").removeClass("active");
        }
    });
});

Answer 3

根据您的代码，当滚动150时，所有人都将类添加到标题中。然后转到css并将active添加属性更新。检查它，在下面的示例中运行：

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 150) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header").removeClass("active");
        }
    });
});

.header{
  position:fixed;
  width:100%;
}
.active{
  background-color:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">HEADER</div>

Answer 4

如果标题是您的课程，您可以尝试以下方法：

$(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").css("background-color", "red");
        } else {
            $(".header").css("background-color", "blue");
        }
    });

Answer 5

我检查了一下，发现代码中有一个小错误，您选择了错误的选择器“ .header”，而必须使用“ #header”，因为header标记中没有标题类。

此代码运行正常：

jQuery(function() {
jQuery(window).on("scroll", function() {
    if(jQuery(window).scrollTop() > 50) {
        jQuery("#header").addClass("active");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       jQuery("#header").removeClass("active");
    }
});

添加CSS：

header.active{ background-color:red;}

需要在滚动条上更改背景颜色

5 个答案: