javascript - 如何实现这样的背景颜色过渡？

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

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.

首先，您可能需要使用 .offset().top instead of .position().top获取对象距文档顶部的距离，而不是距其偏移父级的距离，以防您网站上使用的其他 CSS 生成 .position().top不返回你想要的值。

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

要确定对象何时进入 View ，请从对象的 .offset().top 中减去对象的高度，然后将那个值与滚动位置进行比较。 p>

例如:

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

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

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

编辑:具体如何实现取决于您的文档。您需要将文档的布局方式和元素具有的 CSS 样式与 jQuery 检查的条件进行比较，以获得您想要的效果。例如，如果您的 jQuery 中有两个 if 语句来检查屏幕上是否显示不同的元素，但是这两个元素恰好同时出现，那么其中一个条件永远不会起作用。这就是您的原始代码的问题所在。

为了将页面顶部的文档背景改回白色，我修改了下面的代码片段以删除对 .slide1 的引用。变量 slide1offset 已替换为 hrOffset，它引用 .homeContainer 中的 hr 标记。我这样做是因为 hr 正如您所问的那样位于“快速链接”标题的正下方。然后，在 CSS 中，我将 landing 类更改为白色背景色。

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