添加 return 或删除默认语句 IO

Question

我有一个交集观察器，它根据具有 data-color 和 data-background 的内容相交，在不同的 font-color 和 background-color 中更改 header在其 div/section 上声明。

当处于默认状态且在 div/section 上未声明任何内容时，header 不应更改，但现在它保留其最新更改并且不会 return 默认。所以我的问题是如何将 return/remove 添加到当前脚本中的默认语句？在 fiddle 示例中，您会看到没有声明任何内容的第二个 div 不会变回默认值 header，在本例中为黑底绿。

Fiddle

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

.g-100vh {
height: 100vh
}

header {
  min-height: 50px;
  position: fixed;
  background-color: green;
  color: black;
  width: 100%;
}

路口观察器

  const header = document.querySelector('header');
  const sections = document.querySelectorAll('div');
  const config = {
    rootMargin: '0px',
    threshold: [0.05, 0.95]
  };

  const observer = new IntersectionObserver(function (entries, self) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        if (entry.intersectionRatio > 0.95) {
          header.style.color = entry.target.dataset.color;
          header.style.background = entry.target.dataset.background;   
        } else {
      if (entry.target.getBoundingClientRect().top < 0 ) {
          header.style.color = entry.target.dataset.color;
          header.style.background = entry.target.dataset.background;
          }
        } 
      }
    });
  }, config);

  sections.forEach(section => {
    observer.observe(section);
  });

Answer 1

如果元素没有定义颜色或背景，您可以在代码中添加条件 returns 到默认值；

代码已更改：

header.style.color = entry.target.dataset.color !== undefined ? entry.target.dataset.color : "black";
header.style.background = entry.target.dataset.background !== undefined ? entry.target.dataset.background : "green";

工作示例：

const header = document.querySelector('header');
const sections = document.querySelectorAll('div');
const config = {
  rootMargin: '0px',
  threshold: [.05, .95]
};

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      if (entry.intersectionRatio > 0.95) {
        header.style.color = entry.target.dataset.color !== undefined ? entry.target.dataset.color : "black";
        header.style.background = entry.target.dataset.background !== undefined ? entry.target.dataset.background : "green"; 
      } else {
        if (entry.target.getBoundingClientRect().top < 0 ) {
        header.style.color = entry.target.dataset.color !== undefined ? entry.target.dataset.color : "black";
        header.style.background = entry.target.dataset.background !== undefined ? entry.target.dataset.background : "green"; 
        }
      } 
    }
  });
}, config);

sections.forEach(section => {
  observer.observe(section);
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

.g-100vh {
height: 100vh
}

header {
  min-height: 50px;
  position: fixed;
  background-color: green;
  color: black;
  width: 100%;
}

<header>
 <p>Header Content </p>
</header>
<div class="grid-30-span g-100vh" style="background-color:darkblue;" data-color="white" data-background="blue">
    <img 
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
    data-src="/images/example_darkblue.jpg" 
    class="lazyload"
    alt="<?php echo $title; ?>">
</div>

<div class="grid-30-span g-100vh" style="background-color:lightgrey;">
    <img 
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
    data-src="/images/example_lightgrey.jpg" 
    class="lazyload"
    alt="<?php echo $title; ?>">
</div>

<div class="grid-30-span g-100vh" style="background-color:darkblue;" data-color="white" data-background="blue">
    <img 
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
    data-src="/images/example_darkblue.jpg" 
    class="lazyload"
    alt="<?php echo $title; ?>">
</div>

<div class="grid-30-span g-100vh" style="background-color:lightgrey;" data-color="black" data-background="grey">
    <img 
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
    data-src="/images/example_lightgrey.jpg" 
    class="lazyload"
    alt="<?php echo $title; ?>">
</div>

添加 return 或删除默认语句 IO

Add return or remove to default statement IO

html

javascript

css

intersection-observer