Нужно изменить цвет фона на свитке

Question

На нашем веб-сайте я пытаюсь изменить цвет фона заголовка при прокрутке, но у меня нет идентификатора или класса, относящихся к этому действию прокрутки.

Пожалуйста, найдите ниже URL: http://indemortgage.staging.wpengine.com/

Пожалуйста, верните мне решение

Уже пробовал код ниже:

$(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 1

В заголовке вашего сайта нет класса. поэтому вы можете удалить (точка) и добавить заголовок в 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

Я проверил и обнаружил небольшую ошибку в вашем коде, вы выбрали неправильный селектор ".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;}

Answer 3

Вы можете попробовать это, если заголовок вашего класса:

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

Answer 4

Я проверил вашу разделяемую ссылку и заметил, что уже при прокрутке страницы один класс добавляется в заголовок, а в верхней части прокрутки он также удаляется. «header - not-sticked» этот класс добавляется в ваш заголовок, в то время как он не прокручивается, а «header - is-sticked» этот класс добавляется в ваш заголовок на странице прокрутки. Так что вы можете легко применить свой 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 5

Из вашего кода вы все добавляете класс в заголовок при прокрутке 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>