1

у меня есть своя наработка, но она отрабатывает с ошибками. Может есть у кого в коллекции? Вот моя наработка. Тут он когда появляется в зоне видимости 20% от экрана начинает окрашиваться

let scrollY = window.pageYOffset || document.documentElement.scrollTop;

if ( ( scrollY + document.documentElement.clientHeight * 0.8
        > el.offsetTop &&
        scrollY < el.offsetTop ) ||
        scrollY < el.offsetTop + el.offsetHeight &&
        scrollY > el.offsetTop
    ) {
          el.style.backgroundColor = "#999";
      }

1 ответ 1

3

var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function getCoords(elem) { // кроме IE8-
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset,
    bottom: box.top + pageYOffset + elem.offsetHeight
  };
}
window.onscroll = function() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if(clientHeight + scrolled > getCoords(test).top && scrolled < getCoords(test).bottom) {
        test.style.background = 'red';
    } else{
        test.style.background = 'black';
    }
};
#test{
    background: black;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 2000px;
    transition: 3s;
}
body{
    height: 5000px;
}
<div id="test"></div>

2
  • еще не тестил, но сразу волнует вопрос. Код будет работать и если я буду листать вверх? То есть он окрасится тогда, когда блок появится в верхней части экрана
    – Nikolay
    29 июл 2017 в 22:09
  • @Nikolay, дополнил ответ 30 июл 2017 в 0:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.