使用粘性元素更改背景颜色

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。

- user9018937368

Answer 1

您可以使用差值($('.blue-container').height() - $('.blue').height())计算蓝色 div 和 粉色 div 之间的空白空间，然后当文档滚动到那个位置时，您就知道粉色 div 已经接触到蓝色 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>

- ReSedano

Answer 2

我不确定你是否可以在纯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>

这段代码还在不断完善中，欢迎提供任何意见和建议。

- aloisdg

Answer 3

您可以使用交叉观察器来检测足够多的.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>

- Ori Drori