1

我正在尝试使用 CSSclip和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 中正常工作（实际上，我在一个旧的 StackOverflow 线程上找到了我无法评论的链接），所以我知道这是可能的，我只是不知道是什么他们做的不一样。如果我能找到某种 shim Javascript 或 jQuery 解决方案，我会非常满意，但这似乎是一个非常不寻常的案例场景，我什至不知道从哪里开始寻找。

4

2 回答 2

1

经过一些广泛的故障排除后，我已经解决了这个问题。基本上，clip和/或clip-path在 Chrome 和 IE 中非常脆弱。大多数问题是由在 fixed 中定位元素引起的nav。一旦我删除了position.js 中所有内容的所有声明.nav，它在 Chrome 中的功能主要是预期的。IE 可能是一个失败的原因，所以我必须为它设计一个后备。

警告：将 CSS3 转换应用于内部的任何东西.clipper似乎打破了Chromebackground-attachment: fixed中的第三个。section不知道为什么，但只要禁用 Chrome 的这些效果就很容易了。

于 2015-04-07T19:56:31.567 回答
0

对我有用的是创建一个类，其唯一目的是剪辑部分（在本例中为标题）。

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

然后，使用 jquery 和 waypoints 删除了 clip-path 类，绕过了问题：

$(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 图像，以获得更平滑的感觉。

于 2020-10-29T01:35:37.773 回答