Question

我知道我们可以使用与背景颜色相同的三角形，以便在导航器上将当前状态放入凹槽。但是，我在固定位置div中创建了一个导航菜单，它具有高z-index和背景颜色设置为不透明度为.7，因此整个导航位于页面内容的顶部，但是你可以当你向下滚动页面时看透它。当您向下滚动页面时，是否可以创建一个“切割”不透明div以显示其下方内容的当前状态缺口？

供参考，我正在尝试复制您在iOS应用商店中获得的体验。不幸的是，图片已被删除，图片链接后会显示404页面。您可以查看修订历史记录以查看图像的原始URL。

Answer 1

有很多方法可以做到这一点，这是我的看法：

这是我要使用的布局。 <nav>固定在顶部，下方有一个<div>。内容位于两者之下，其填充顶部等于导航和凹陷的高度。

+--------------------------------+--+
|                                |  |
|               nav (fixed)      |  |   <-- the content is below these fixeds,
|                                |  |       which have a higher z-index
+--------------------------------+  |
|              notch (fixed)     |  |
+--------------------------------+  |
|                                   |
|                                   |
|                                   |
|              content              |
|              section              |
| (padding-top = nav+notch heights) |
|                                   |
|                                   |
+-----------------------------------+

我假设你想要一个流畅的布局，所以我选择使用FlexBox（http://www.w3.org/TR/css3-flexbox/）来保持凹口位于它应该的位置浏览器调整大小。如果你有一个固定的布局，有几个更直接的解决方案，不需要FlexBox或计算凹口应放在柔性容器的哪个位置。

由于其他部分应该相当简单，下面是划分<div>

+---------------------------------------------------+
|                 |       |       |                 |
|     spacing     | notch | notch |     spacing     |
|   (flexible)    | left  | right |    (flexible)   |
|                 |       |       |                 |
+---------------------------------------------------+

两个外部<div>被弯曲并与background-color具有相同的<nav>。然后，两个内部凹口使用渐变来创建三角形。

background: -webkit-linear-gradient(
    top left,
    rgba(145, 145, 145, 1) 0%,
    rgba(145, 145, 145, 1) 50%,
    transparent 50%,
    transparent 100%
);

通过在左上角和右上角开始渐变，<div> s在对角线的中间填充。

其余的只是确定点击导航链接时应放置凹口的位置。我通过在确定用户点击的位置后添加和删除灵活<div>的宽度来实现此目的。理解FlexBox如何在从弯曲的元素中添加和减去宽度时需要一些时间，但是您可以检查代码以查看它。

我使用-webkit-前缀在Chrome中完成了所有这些操作，因此请在Chrome或Safari中运行此JSFiddle：http://jsfiddle.net/dwJbq/

正如我之前所说，还有其他几种方法可以做到，如果不使用流畅的布局，它也会容易得多。您可以尝试的另一个想法是为每个导航链接设置一个缺口，然后显示/隐藏被点击的链接下方的缺口。这不需要你计算任何东西，而只是改变凹口的背景。

以下是如何完成此操作的示例：http://jsfiddle.net/V4K6K/1/

如何在固定菜单上创建透明的当前状态缺口？

1 个答案: