Docs

[yhshin1020]

Hey,

I am using a custom Js to make the color of the background fade in and out as the user scrolls down the section.

I’ve included these codes in my css:

.supporthead{
    height: 100vh;
    padding-left: 7%;
    padding-right: 7%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
    background-color: #FF006B !important;
}

.supporthead .scrolled { background: black !important; }

This is in my JS:

jQuery(function($) {
    $('.page-id-1234 input[name="_wpcf7_checkbox_free_text_id:nation"]').attr('placeholder','Please Specify');
    $('.page-id-1234 input[name="_wpcf7_checkbox_free_text_id:lang"]').attr('placeholder','Please Specify');
   $(window).scroll(function () {
        if($(document).scrollTop()>200){
          $('.supporthead').addClass('scrolled');
        }
        else {
          $('.supporthead').removeClass('scrolled');
        }
      });
});

I’ve tried this and it doesnt seem to work.

Am i doing something wrong here?

Thanks

[yhshin1020]

This reply has been marked as private.

[Rad]

Hi there,

Please change your CSS to this,

  .supporthead{
    height: 100vh;
    padding-left: 7%;
    padding-right: 7%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
    background-color: #FF006B !important;
transition: all 2s;
}

.supporthead.scrolled { background: black !important; }

That should do it 🙂

Cheers!

[yhshin1020]

This reply has been marked as private.

[Thai]

You’re most welcome 🙂

[Author]

Posts