Google AMP：可以在滚动时隐藏标题吗？答案

【问题标题】：Google AMP: Hide header on scroll possible?Google AMP：可以在滚动时隐藏标题吗？
【发布时间】：2019-11-07 06:23:24
【问题描述】：

需要 Google-AMP 工作人员的帮助。我试图在向下滚动时隐藏导航栏。如果在向上滚动时再次显示。我正在尝试隐藏标题

<nav id="navToHide">Nvabar</nav>

AMP 动画代码我的镜头：

<amp-animation id="hideNav" layout="nodisplay">
    <script type="application/json">
        {
        "duration": "200ms",
        "fill": "forwards",
        "iterations": "1",
        "direction": "alternate",
        "animations": [{
            "selector": "#navToHide",
            "keyframes": [{
                "transform": "translateY(-180px)"
            }]
        }]
        }
    </script>
</amp-animation>

AMP 位置观察器代码：

<amp-position-observer on="enter:select-item1.start" layout="nodisplay"></amp-position-observer>

我想在滚动时制作类似于导航栏的东西。就像下面这个例子。 https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

我试图避免使用 javascript

【问题讨论】：

标签： amp-html

【解决方案1】：

使用amp-fx-collection 的float-in 属性有一个非常简单的方法。

将所需的<amp-fx-collection>脚本添加到页面头部：

<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

并将amp-fx='float-in-top' 属性应用于您的<nav> 元素。

您可以在此视频中看到它的演示：

AMP Conf 2019, amp.dev live!

【讨论】：

谢谢你，伙计，你还必须有以下CSS属性：位置：固定溢出：如果它是顶部，则顶部：0，如果它是底部，底部：0