how to achieve the background color transition like this?

Question

I just exploring some sites and came across this background color transition and liked that so much that now I want to create something like this. I tried my best to achieve this, but I'm not able to get what is desired.

I want to change the color as the div appears on the screen. Currently, it is changing when it reaches the top of the browser.

How is it possible to achieve this?

Here is my attempt:

$(window).on("scroll touchmove", function () {
    if ($(document).scrollTop() >= $(".homeContainer").position().top) {
        setTimeout(function () {
            $('.transGrow').addClass('grow');
        }, 275);
        $('body').addClass('landing');
        $('header').addClass('landing');
        $('body').removeClass('quickLinks');
        $('header').removeClass('quickLinks');
    }
    ;
    if ($(document).scrollTop() > $(".slide1").position().top) {
        $('body').addClass('quickLinks');
        $('header').addClass('quickLinks');
        $('body').removeClass('landing');
        $('header').removeClass('landing');
        $('body').removeClass('aboutUs');
        $('header').removeClass('aboutUs');
    }
    ;
    if ($(document).scrollTop() > $(".slide2").position().top) {
        $('body').addClass('aboutUs');
        $('header').addClass('aboutUs');
        $('body').removeClass('quickLinks');
        $('header').removeClass('quickLinks');
    }
    ;
});

.landing
{
    background-color:#F8BBD0;
}
.quickLinks {
    background-color: #9575CD;
}
.aboutUs{
    background-color: #9CCC65;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeContainer">
<div class="container-fluid slide slide1 section-basic" id="quickLinks">
        <div class="rows">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                <h1 class="text-uppercase text-center heading-basic">Quick Links</h1>
                <hr class="transGrow">
            </div>
        </div>
        <div class="rows">
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/pdf1.jpg" id="pdf" alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">PDF Books</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/receipe1.jpg" id="recipe"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Jain Recipes</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/panchang1.jpg" id="panchang"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Jain Panchang</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/czone1.jpg" id="czone"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Children Zone</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/puja1.jpg" id="pooja"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Pooja Pujans</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive"
                             src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Religious Sutras</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="container-fluid slide slide2 section-basic" data-color="#ef9a9a">
        <div class="rows">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                <h1 class="text-uppercase text-center heading-basic">About Us</h1>
                <hr>
            </div>
        </div>
        <div class="rows">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-basic" data-aos="fade-right">
                <img src="../images/homepage.jpg" class="img-responsive">
            </div>
            <div class="scrollable-cover col-lg-6 col-md-6 col-sm-12 col-xs-12 padding-basic" data-aos="fade-left">
                <div class="simplebar-content scrollable-basic" data-scrollbar>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in
                        elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices
                        mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis
                        purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra
                        suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor
                        ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices,
                        diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at
                        malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam
                        erat volutpat. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in
                        elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices
                        mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis
                        purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra
                        suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor
                        ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices,
                        diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at
                        malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam
                        erat volutpat. </p>
                   
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I want to transit the color as the div appears on the screen currently it is changing when it reach the top of the browser.

First, you may want to use .offset().top instead of .position().top to get the distance the object is from the top of the document, rather than the distance it is from its offset parent, in case other CSS you have going on on your site makes .position().top not return the value you want.

Then compare the scroll distance to that value. This will tell you when the top of the object is at the top of the screen.

To find when the object comes into view, subtract the object's height from its .offset().top, and compare that value to the scroll position.

For example:

if($(document).scrollTop() > $('.slide2').offset().top - $('.slide2').height())

I have illustrated this in the snippet below by outlining .slide with a gold border.

I've also added a transition property to help the background color change smoothly, as Lansana showed.

Edit: How exactly you implement this depends on your document. You need to compare how your document is laid out and the CSS styles your elements have with the conditions your jQuery is checking for in order to get the effect you want. For example, if you have two if statements in your jQuery checking whether different elements are showing on the screen, but both those elements appear at the exact same time, one of those conditions is never going to work. That is what part of the problem with your original code.

In order to change the document background back to white at the top of the page, I revised the snippet below to get rid of the reference to .slide1. The variable slide1offset has been replaced by hrOffset, which refers to the hr tag within .homeContainer. I did this because that hr is right below the "Quick Links" header, as you asked. Then, in the CSS, I changed the landing class to have a white background color.

$(window).on("scroll touchmove", function() {

  var homeOffset = $('.homeContainer').offset().top - $('.homeContainer').height();
  var hrOffset = $('.homeContainer').find('hr.transGrow').offset().top - $('.homeContainer').find('hr.transGrow').height();
  var slide2Offset = $('.slide2').offset().top - $('.slide2').height();
  var elms = $('body').add('header');

  if ($(document).scrollTop() >= homeOffset) {
    setTimeout(function() {
      $('.transGrow').addClass('grow');
    }, 275);
    $(elms).addClass('landing').removeClass('quickLinks');
  };
  if ($(document).scrollTop() > hrOffset) {
    $(elms).addClass('quickLinks').removeClass('landing aboutUs');
  };
  if ($(document).scrollTop() > slide2Offset) {
    $(elms).addClass('aboutUs').removeClass('quickLinks');
  };
});

.landing,
.quickLinks,
.aboutUs {
  transition: background-color 400ms;
}
.landing {
  background-color: #fff;
}
.quickLinks {
  background-color: #9575CD;
}
.aboutUs {
  background-color: #9CCC65;
}
.slide2 {
  border: 2px solid gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeContainer">
  <div class="container-fluid slide slide1 section-basic" id="quickLinks">
    <div class="rows">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
        <h1 class="text-uppercase text-center heading-basic">Quick Links</h1>
        <hr class="transGrow">
      </div>
    </div>
    <div class="rows">
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/pdf1.jpg" id="pdf" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">PDF Books</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/receipe1.jpg" id="recipe" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Jain Recipes</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->
          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/panchang1.jpg" id="panchang" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Jain Panchang</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->
          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/czone1.jpg" id="czone" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Children Zone</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/puja1.jpg" id="pooja" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Pooja Pujans</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">
            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Religious Sutras</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="container-fluid slide slide2 section-basic" data-color="#ef9a9a">
    <div class="rows">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
        <h1 class="text-uppercase text-center heading-basic">About Us</h1>
        <hr>
      </div>
    </div>
    <div class="rows">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-basic" data-aos="fade-right">
        <img src="../images/homepage.jpg" class="img-responsive">
      </div>
      <div class="scrollable-cover col-lg-6 col-md-6 col-sm-12 col-xs-12 padding-basic" data-aos="fade-left">
        <div class="simplebar-content scrollable-basic" data-scrollbar>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
            venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
            auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
            dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
            venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
            auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
            dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>

        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

What you want to do is set a transition on your backgrounds. Then set modifier classes that change their colors, and the change of color will happen using the transition.

For example:

.landing, .quickLinks, .aboutUs {
    background-color: #fff;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
}
.landing.loading--active {
    background-color:#F8BBD0;
}
.quickLinks.quickLinks--active {
    background-color: #9575CD;
}
.aboutUs.aboutUs--active {
    background-color: #9CCC65;
}

When the loading--active, quickLinks--active or aboutUs--active are added to their respective divs, their background colors will transition with a one second duration using the ease timing function.

When the user scrolls, use your jQuery to add the modifier classes:

$(document).on('scroll', function () {
    if (/*div.landing scrolled to*/) {
        $('.landing').addClass('landing--active');
    }

    if (/*div.quickLinks scrolled to*/) {
        $('.quickLinks').addClass('quickLinks--active');
    }

    if (/*div.aboutUs scrolled to*/) {
        $('.aboutUs').addClass('aboutUs--active');
    }
});