如果滚动时可见div，则对主体进行动画处理并更改其背景颜色

Question

I'm trying to change the background-color of my body with jQuery, when a specific div (in my example the red one) is visible while scrolling. If the div is not visible, the background-color should change again with an animation. I tried follow, but it's not working. Here's also a codepen snippet: https://codepen.io/STWebtastic/pen/qpKdeo

 $(window).scroll(function(){ $('.m-box--red').each(function(){ if(isScrolledIntoView($(this)) ){ $("html body").animate({ backgroundColor: "red" }, 300); console.log('hello'); } else{ $("html body").animate({ backgroundColor: "white" }, 300); console.log('hello'); } }); }); function isScrolledIntoView(elem){ var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } 

 body { box-sizing: border-box; margin: 0; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 300px; } .m-box--second { background-color: #68808E; } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box__text { font-size: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> 

Answer 1

One problem could be this :

jQuery animate backgroundColor

And the other problem is that you loop over all the div so the body background will get the color of the condition which is in the last item of the loop. So in your case, always white.

So i think you could just addClass with a transition on the background property and only test the red div.

Working codepen :

https://codepen.io/Alvan/pen/rpKLjY?editors=1111

 $(window).scroll(function(){ $('.m-box--red').each(function(){ if(isScrolledIntoView($(this)) ){ $("body").addClass('red'); } else{ $("body").removeClass('red'); } }); }); function isScrolledIntoView(elem){ var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } 

 body { box-sizing: border-box; margin: 0; background: white; transition: background .3s; } body.red { background: red; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 150px; } .m-box:hover { background-color: lighten(#75989F, 10); } .m-box--second { background-color: #68808E; } .m-box--second hover { background-color: lighten(#68808E, 10); } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--third:hover { background-color: lighten(#CDC2AA, 10); } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box--red :hover { background-color: lighten(#D29B8E, 10); } .m-box__text { font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> 

If you want the function to work when the top appears at the screen until the bottom disappear from the screen change the condition in function isScrolledIntoView to

if(elemTop <= docViewBottom && elemBottom >= docViewTop) {
    return true;
}

 $(window).scroll(function(){ $('.m-box--red').each(function(){ if(isScrolledIntoView($(this)) ){ $("body").addClass('red'); } else{ $("body").removeClass('red'); } }); }); function isScrolledIntoView(elem){ var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); if(elemTop <= docViewBottom && elemBottom >= docViewTop) { return true; } } 

 body { box-sizing: border-box; margin: 0; background: white; transition: background .3s; } body.red { background: red; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 150px; } .m-box:hover { background-color: lighten(#75989F, 10); } .m-box--second { background-color: #68808E; } .m-box--second hover { background-color: lighten(#68808E, 10); } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--third:hover { background-color: lighten(#CDC2AA, 10); } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box--red :hover { background-color: lighten(#D29B8E, 10); } .m-box__text { font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> 

Answer 2

You should use jQuery's .is and :visible selectors to do this:

const $scrollTarget = $(".m-box");
const $body = $("body");
const $window = $(window);

$window.on("scroll", function() {
    return $scrollTarget.is(":visible") ? $body.addClass("element-visible-class") : $body.removeClass("element-visible-class");
});

Where element-visible-class is the class you want to apply when the element is visible.

Answer 3

I made some changes to your code, but I think this is the solution you are looking for:

 $(window).scroll(function() { var hT = $('.m-box--red').offset().top, hH = $('.m-box--red').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); if (wS >= (hT+hH) || wS < (hT+hH-wH)){ $("body").css("background-color", "white"); } else if (wS > (hT+hH-wH)) { $("body").css("background-color", "red"); } }); 

 body { box-sizing: border-box; margin: 0; transition: background-color .5s; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 300px; } .m-box:hover { background-color: #93aeb4; } .m-box--second { background-color: #68808E; } .m-box--second:hover { background-color: #8499a5; } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--third:hover { background-color: #e0d9ca; } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box--red:hover { background-color: #e1bbb2; } .m-box__text { font-size: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> 

You just have to add

transition: background-color .5s;

to the body in your css.

Answer 4

according to jquery doc ( http://api.jquery.com/animate/ ) :

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used).

If you don't want to use this plugin, you can achieve this by completing your css and adding a class to your body when you need

 $(window).scroll(function(){ $('.m-box--red').each(function(){ // change the selector cause you only need this on m-box--red $("html body").toggleClass("red",isScrolledIntoView($(this))); // check if the condition is true then add class red, else remove it }); }); function isScrolledIntoView(elem){ var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); // also chnage this var docViewBottom = docViewTop + $("body").height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } 

 body { box-sizing: border-box; margin: 0; transition: background-color 0.3s; } body.red{ background-color:red; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 300px; } .m-box--second { background-color: #68808E; } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box__text { font-size: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> 

Answer 5

I would suggest a few changes to better optimize your code (and fix it at the same time!):

1. Make css animate the background color for you, as that is what css if for.
2. Move a lot of the processing you're currently doing inside the scroll event handler, outside to minimize what needs to be done on that event. This will prevent stutterly scrolling, or "jank".

Number one can be done by simply adding this to your css:

body {
  transition: background-color .3s;
}

and then changing your javascript from using the animate() jquery function to simply changing the css property like so:

$('body').css('background-color','red');

The css transition property will then natively handle the color transition for you. In fact, an even better way to do it would be to have the javascript simply add/remove a class and have the css handle what that class means for the styling. Then you can use css to control what styles are applied to this special state of the body tag -- which is where your styles should be.

Here is my rewrite of your code working towards these improvements (you need to view the snippet as full screen in order for the effect to work):

 (function(){ var $window = $(window); var $elem = $('.m-box--red'); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); $(window).scroll(function(){ if( isScrolledIntoView( $elem )) $('body').addClass('js-active'); else $('body').removeClass('js-active'); }); function isScrolledIntoView($elem){ var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } })(); 

 body { box-sizing: border-box; margin: 0; transition: background-color .3s; } body.js-active { background-color: red; } .m-box { display: flex; align-items: center; padding: 10px; background-color: #75989F; margin-bottom: 100px; cursor: pointer; color: white; transition: background-color 0.3s; height: 300px; } .m-box:hover { background-color: #93aeb4; } .m-box--second { background-color: #68808E; } .m-box--second:hover { background-color: #8499a5; } .m-box--third { background-color: #CDC2AA; color: gray; } .m-box--third:hover { background-color: #e0d9ca; } .m-box--red { background-color: #D29B8E; border: 1px solid lightgray; } .m-box--red:hover { background-color: #e1bbb2; } .m-box__text { font-size: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div> <div class="m-box m-box--second"> <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--red"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box m-box--third"> <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> <div class="m-box"> <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p> </div>