如何实现这样的背景颜色转换？

Question

我只是探索了一些网站并遇到了this background color transition并且非常喜欢它，现在我想要创建这样的东西。我尽力实现这一目标，但我无法得到所需的东西。

我想在屏幕上显示div时更改颜色。目前，它在到达浏览器顶部时会发生变化。

如何实现这一目标？

这是我的尝试：

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

  

我希望传输颜色，因为当屏幕显示在屏幕上，当它到达浏览器顶部时，它正在变化。

首先，您可能希望使用.offset().top instead of .position().top来获取对象距文档顶部的距离，而不是它与偏移父级的距离，以防您在其他CSS上进行的操作网站使.position().top无法返回您想要的值。

然后将滚动距离与该值进行比较。这将告诉您对象的顶部何时位于屏幕顶部。

要查找对象何时进入视图，请从其.offset().top中减去对象的高度，并将该值与滚动位置进行比较。

例如：

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

我已在下面的代码段中通过用金色边框勾勒.slide来说明这一点。

我还添加了一个transition属性来帮助背景颜色顺利变化，正如Lansana所示。

修改：您实现此目标的具体方式取决于您的文档。您需要比较文档的布局方式和元素的CSS样式以及jQuery要检查的条件，以获得所需的效果。例如，如果jQuery中有两个if语句检查屏幕上是否显示了不同的元素，但这两个元素在同一时间出现，则其中一个条件永远不会起作用。这就是原始代码问题的一部分。

为了在页面顶部将文档背景更改回白色，我修改了下面的代码段以删除对.slide1的引用。变量slide1offset已被hrOffset取代，hr引用.homeContainer中的hr标记。我之所以这样做是因为landing正好位于＆＃34;快速链接＆＃34;标题，正如你问的那样。然后，在CSS中，我将$(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'); }; });类更改为具有白色背景颜色。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

"rajeev"

＆＃13;

＆＃13;

＆＃13;

Answer 2

您要做的是在背景上设置转场。然后设置改变颜色的修饰符类，并使用转换发生颜色变化。

例如：

.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;
}

当loading--active，quickLinks--active或aboutUs--active添加到各自的div时，其背景颜色将使用ease计时功能以一秒的持续时间转换。< / p>

当用户滚动时，使用jQuery添加修饰符类：

$(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');
    }
});