Изменить цвет фона с помощью липкого элемента

Question

Я бы хотел изменить цвет фона тела на свитке с помощью липкого элемента.

body {
  margin: 0;
  background: lightblue;
}

.blue-container {
  height: 70vh;
}

.blue {
  height: 40vh;
  position: sticky;
  width: 70%;
  top: 0;
  background: blue;
  margin: auto;
}

.pink {
  height: 500px;
  position: relative;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: pink;
  text-align: center;
}

<div class='blue-container'>
  <div class='blue'></div>
</div>

<div class='pink'> When I touch the blue bloc, I would like the 'body background' change into an other color (for exemple : orange)</div>

Вот мой jsFiddle , чтобы понять, чего я хочу.

Answer 1

Вы можете вычислить пустое пространство между blue div и pink div с разницей ($('.blue-container').height() - $('.blue').height()), а затем, когда документ прокручивается до этой ошибки, вы знаете, что розовый div коснулся синего.

$(function(){

  $(window).scroll(function(){
    var margin = $('.blue-container').height() - $('.blue').height();
    if($(this).scrollTop()>=margin){
        $("body").addClass("orange")
    } else{
    	$("body").removeClass("orange")
    }
  });
});

body {
  margin:0;
  background:lightblue;}

.blue-container {
 height:70vh;
}

.blue {
 height:40vh;
 position:sticky;
 width:70%;
 top:0;
 background:blue;
 margin:auto;
}

.pink {
 height:500px;
 position:relative;
 width:70%;
 margin-right:auto;
 margin-left:auto;
 background:pink;
  text-align:center;
}

.orange{
  background:orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blue-container'>
  <div class='blue'></div>
</div>

<div class='pink'> When I touch the blue bloc, I would like the 'body background' change into an other color (for exemple : orange)</div>

Answer 2

Вы можете использовать наблюдатель пересечения , чтобы обнаружить, когда достаточное количество элемента .pink находится внутри области просмотра, коснуться элемента .blue:

const body = document.querySelector('body');
const blue = document.querySelector('.blue');
const target = document.querySelector('.pink');

const getHeight = (el) => el.getBoundingClientRect().height;

// get the threshold in which enough of the pink elment would be inside the viewport to touch the blue element
const threshold = (window.innerHeight - getHeight(blue)) / getHeight(target);

const options = {
  rootMargin: '0px',
  threshold
};

let prevRatio = 0;

const handleIntersect = (entries, observer) => {
  entries.forEach(function(entry) {
    // if going up (above the previous threshold & above the threshold
    if (entry.intersectionRatio >= threshold && entry.intersectionRatio > prevRatio) {
      body.classList.add('body--intersected');
    } else {
      body.classList.remove('body--intersected');
    }

    prevRatio = entry.intersectionRatio;
  });
}

const observer = new IntersectionObserver(handleIntersect, options);

observer.observe(target);

body {
  margin: 0;
  background: lightblue;
}

.body--intersected {
  background: pink;
}

.blue-container {
  height: 70vh;
}

.blue {
  height: 40vh;
  position: sticky;
  width: 70%;
  top: 0;
  background: blue;
  margin: auto;
}

.pink {
  height: 500px;
  position: relative;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: pink;
  text-align: center;
}

<div class='blue-container'>
  <div class='blue'></div>
</div>

<div class='pink'> When I touch the blue bloc, I would like the 'body background' change into an other color (for exemple : orange)</div>

Answer 3

Я не знаю, можете ли вы сделать это в чистом CSS, но вот решение vanillaJS:

• Мы запускаем событие при прокрутке
• Мы проверяем нижнюю позицию синего и розового цветаверхняя позиция
• Если они равны, мы запускаем логику.

var blue = document.querySelector('.blue')
var pink = document.querySelector('.pink')
var onTouch = false;

//http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-scroll
function onScrollEventHandler(ev) {
    var bottom = blue.getBoundingClientRect().bottom
    var top = pink.getBoundingClientRect().top
    // we set
    if (bottom == top && !onTouch) {
        document.body.style.backgroundColor = 'orange' 
        onTouch = true
    }
    // we reset
    if (bottom != top && onTouch) {
      document.body.style.backgroundColor = 'lightblue' 
      onTouch = false
    }
} 

var el=window;
if(el.addEventListener)
    el.addEventListener('scroll', onScrollEventHandler, false);   
else if (el.attachEvent)
    el.attachEvent('onscroll', onScrollEventHandler); 

body {
  margin:0;
  background:lightblue;}

.blue-container {
 height:70vh;
}

.blue {
 height:40vh;
 position:sticky;
 width:70%;
 top:0;
 background:blue;
 margin:auto;
}

.pink {
 height:500px;
 position:relative;
 width:70%;
 margin-right:auto;
 margin-left:auto;
 background:pink;
  text-align:center;
}

<div class='blue-container'>
  <div class='blue'></div>
</div>

<div class='pink'> When I touch the blue bloc, I would like the 'body background' change into an other color (for exemple : orange)</div>

Этот код находится в стадии разработки.Все материалы приветствуются.