Question

我的网站右侧和左侧有一个带有后退/下一个按钮的网站。它们是单色图标。问题是当页面滚动时它们覆盖黑白图像。可以设置'锚'或类似的东西，以便在页面到达时（类似于'粘'对象的工作方式我猜）我可以改变div的颜色吗？

html（Wordpress）

...

<div><?php bnNav_content_nav( 'nav-below' ); ?></div> //puts the back/next buttons on the page

CSS

 [class*="navigation"] .nav-previous a,
 [class*="navigation"] .nav-next a {
   position: fixed;
   z-index: 999; 
   color: #fff;
  }

我理解我的代码很难理解，但基本上输出是

post images ...

'anchor' to change the .nav color

post content...

<nav>
  <nav id="nav-next"> ... </div>
  <nav id="nav-previous"> ... </div>
</nav>

编辑：导航重叠图像，然后内容在白色背景上。我希望导航在图像上方时为白色，然后在内容变为黑色时变为黑色。所以基本上设置了一个可以改变的地方

Answer 1

您可以使用JavaScript迭代所有元素但导航并检查哪些元素相交，然后将属性放在导航将与您希望导航文本的颜色相交的元素上，然后更新每个滚动事件的颜色

＆＃13;

var nav = document.querySelector("nav");
var navRect = nav.getBoundingClientRect();
function checkNavColor() {
  var allButNav = document.querySelectorAll(":not(nav)");
  for (var i = 0; i < allButNav.length; i++) {
    var rect1 = allButNav[i].getBoundingClientRect();
    var rect2 = navRect;
    // By Buu Nguyen (http://stackoverflow.com/a/12067046/4245061)
    if (!(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom)) {
      nav.style.color = allButNav[i].getAttribute("data-navcolor");
    }
  }
}
window.addEventListener("scroll", checkNavColor);
checkNavColor();

＆＃13;

body {
  height: 200vh;
}

nav {
  position: fixed;
}
div {
  height: 200px;
}
div:first-child {
  background: black;
}
div:nth-child(2) {
  background: white;
}
div:last-child {
  background: black;
}

＆＃13;

<nav>Text which changes color</nav>
<main>
  <div data-navcolor="white"></div>
  <div data-navcolor="black"></div>
  <div data-navcolor="white"></div>
</main>

＆＃13;

如果您在片段中包含多个元素并且还使用HTML作为非语义内容，那么这是一个非常糟糕的解决方案。

如果您希望文本可见，无论背景如何，您都可以添加与文本颜色相反的阴影：

＆＃13;

body {
  height: 200vh;
}

nav {
  position: fixed;
  /* Add the smallest possible shadow in all directions */
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
div {
  height: 200px;
}
div:first-child {
  background: black;
}
div:nth-child(2) {
  background: white;
}
div:last-child {
  background: black;
}

＆＃13;

<nav>Text which has a shadow of the opposite color</nav>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

＆＃13;

在不同的页面位置定位div颜色

1 个答案: