主页 / 问题 / 1555155
Accepted
Vadim Lyutsko
Asked:2023-12-08 16:06:22 +0000 UTC2023-12-08 16:06:22 +0000 UTC

当将块从背景颜色：＃040404（这是黑色）传递到白色时，位置为固定的块内的文本如何改变颜色？

  • 772

无法使用mix-blend-mode: difference;。尝试了很多次但没有任何效果

下面是块本身的 JSX 和 SCSS。

.menu {
  color: $Black-color;
  top: 60px;
  position: fixed;
}

.navigate ul {
  margin-bottom: 40px;
}

.logoContainer {
  margin-bottom: 29px;
}

.chapter {
  font-size: 24px;
  .chapterLink {
    color: #040404;
  }
}

.chapter:not(:last-child) {
  margin-bottom: 20px;
}

.consultation {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  width: 188px;
  max-height: 78px;
  display: flex;
  padding: 20px;
  align-items: center;
  border-radius: 12px;
  border: 2px solid $Black-color;
  text-align: start;
}
<div className={styles.menu}>
  <nav className={styles.navigate}>
    <ul>
      <li className={styles.chapter}>
        <Link className={styles.chapterLink} href={ '#'}> Текст, который должен менять цвет...
        </Link>
      </li>
    </ul>
  </nav>
</div>

块，当通过时颜色应该改变：

.contentBlack {
  background-color: $Black-color;
  max-width: 1700px;
  padding: 0 10px;
  margin: 0 auto;

  @media screen and (max-width: $Mobile) {
    max-width: 446px;
    padding: 0 16px;
  }
}
css

1 个回答

  1. Best Answer

    要在将黑色块传递到白色块时更改具有position:fixed的块内文本的颜色，您可以使用JavaScript。

    滚动页面时，脚本会跟踪滚动的位置，并将其与黑色背景块的位置进行比较。如果滚动在此块内，则 id="fixedBlock" 的块中的文本颜色将更改为白色，否则更改为黑色：

    var fixedBlock = document.getElementById('fixedBlock');
var blackBlock = document.getElementById('blackBlock');

window.onscroll = function() {
  var scrollPosition = window.scrollY;

  if (scrollPosition >= blackBlock.offsetTop && scrollPosition <= (blackBlock.offsetTop + blackBlock.offsetHeight)) {
    fixedBlock.style.color = 'white';
  } else {
    fixedBlock.style.color = 'black';
  }
};

    • 0

相关问题