Question

我正在尝试使用CSS clip和clip-path属性来显示单页网站布局的浮动分页器导航。我试图让导航根据它是在黑暗还是浅背景上改变颜色。您可以在http://dannymcgee.net/redesign的Firefox中查看预期结果。我还在http://dannymcgee.net/dev/clipnav-prototype/处使用更清晰，重量更轻的代码复制了导航和容器，以便进行故障排除。

这是为具有不同背景颜色的每个部分构建标记的方式：

<section>

  <div class="clipper">
    <ul class="nav">
      ...
    </ul>
  </div>

  <article class="content">
    ...
  </article>

</section>

每次背景更改时，都会重复整个section。每个section都相对定位。 .clipper的样式如下：

position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);

剪辑器内的.nav位于页面顶部position: fixed，并且backface-visibility: hidden。

效果基本上与我在Firefox中的预期效果完全相同，但在Chrome和IE中有问题。在Chrome中，背景图片的行为很奇怪，导航在第一部分之后无法进行交互。在IE中，导航根本不会出现在第一部分之后。我已经看到这个完全相同的设置在Chrome和IE here中正常工作（实际上，我在an old StackOverflow thread找到了我无法发表评论的链接），所以我知道这是可能的，我只是可以不知道他们在做什么不同。如果我能找到一个，我会非常满意使用某种Shim Javascript或jQuery解决方案，但这似乎是一个非常不寻常的案例场景，我甚至不知道从哪里开始看。

Answer 1

经过一番广泛的故障排除后，我解决了这个问题。基本上，clip和/或clip-path在Chrome和IE中非常脆弱。大多数问题是由于在固定nav内定位元素造成的。我删除position内所有内容的所有.nav声明后，其功能主要与Chrome中的预期相同。 IE可能是一个失败的原因，所以我将不得不为它设计一个后备。

警告：将CSS3转换应用于.clipper内的任何内容似乎会破坏Chrome中第三个background-attachment: fixed的{{1}}。不知道为什么，但只是为Chrome禁用这些效果会很容易。

Answer 2

对我有用的是创建一个类专门用于剪切节（在本例中为标题）。

.clip-path-header {
    clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
}

然后，使用jquery和航点删除剪切路径类，从而绕过该问题：

$(document).ready(function() {
      $('.js--first-section').waypoint(function(direction) {
          if (direction == "down") {
              $('nav').addClass('sticky');
              $('header').removeClass('clip-path-header');
          } else {
              $('nav').removeClass('sticky');
              $('header').addClass('clip-path-header');
          }
      },{
          offset:'60px;' /* or your preferred offset */
      });
});

您还可以通过创建另一个类来将bg图像的不透明度设置为0，然后将其添加到滚动条的标题中以获得更平滑的效果，从而删除bg图像。

固定导航上的CSS剪辑/剪辑路径不在Chrome和IE中合作

2 个答案: