4

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

作为参考，我正在尝试复制您在 iOS 应用商店中获得的体验。不幸的是，该图像已被删除，跟随该图像的链接给出了一个 404 页面。您可以检查修订历史以查看图像的原始 URL。

4

1 回答 1

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>s 是弯曲的，并且与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>在确定用户点击的位置之后，我通过在灵活的 s 中添加和删除宽度来做到这一点。需要一些时间来了解 FlexBox 在从正在弯曲的元素中添加和减去宽度时的工作原理，但您可以检查代码以查看这一点。

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

As I stated previously, there are several other ways this could be done and it would also be much easier if not using a fluid layout. Another idea you could try is to have a notch for every nav link, and then showing/hiding the notch underneath the link that was clicked. This doesn't require you to calculate anything, rather just change the backgrounds of the notches.

Here is an example of how that could be done: http://jsfiddle.net/V4K6K/1/

于 2012-11-08T21:06:40.823 回答