AMP: amp-script не запущен

Я пытаюсь использовать amp-script для переключения класса на моем nav (верхняя строка меню), когда окно начинает прокручиваться. В результате фиксированная навигационная панель меняет свой цвет с полупрозрачного до сплошного белого цвета.

Вот что я пробовал ...

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <style amp-custom>
    nav {
      position: fixed;
      top: 0;
      width: 100vw;
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 10;
      text-align: center;
    }

    .opaque {
      background-color: white;
      color: black;
    }

    .hero {
      height: max(25vh, 250px);
      width: 100vw;
      background: red;
    }

    .spacer {
      height: 4em;
      background: blue;
      margin: 0.5em;
    }
  </style>
  <meta name="amp-script-src" content="sha384-bpf6fazoofAb6S1aK0_hOIa1g6nDaC_SPbTuSJsMxEzAPc11oKjAnJZmeFAMKc2p ">
</head>
<body>
  <script id="scroll-listener" type="text/plain" target="amp-script">
    document.addEventListener("scroll", myFunction);

    function myFunction() {
      console.log('scrolled!!');
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("topnav").className = "opaque";
      } else {
        document.getElementById("topnav").className = "";
      }
    }
  </script>
  <nav id="topnav">
    <h1>ACME Inc.</h1>
  </nav>
  <main>
    <header class="hero"></header>
    <article>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
    </article>
  </main>
</body>
</html>

К сожалению, сценарий вообще не действует. Я также разместил console.log операторов, чтобы увидеть, получаю ли я вообще какие-либо события прокрутки - и ничего не отображается в консоли.

Есть идеи, что я здесь делаю не так?

ОБНОВЛЕНИЕ: чтобы убедиться, что это работает как страница без AMP, я изменил строку в приведенном выше примере:

<script id="scroll-listener" type="text/plain" target="amp-script">...</script>

к этому ...

<script id="scroll-listener" type="text/javascript">...</script>

и сайт работает как положено. Так что я точно знаю, что написанный javascript делает то, что я хочу. Проблема полностью в том, как AMP обрабатывает скрипт.

javascript scroll amp-html

28.08.2020

Я вижу красную строку заголовка с белым текстом (логотипом). При прокрутке синие строки прокручиваются, но белый текст заголовка остается неизменным. Это похоже на приведенный выше код. Что мне не хватает? 28.08.2020
Переключение класса не происходит. Полоса заголовка должна измениться на белый фон, как только начнется прокрутка. 28.08.2020
@JayGray вам может потребоваться щелкнуть всю страницу, чтобы увидеть, как фрагмент кода работает правильно. 28.08.2020
Хорошо, похоже, Element.scrollTop не поддерживается. См .: github.com/ampproject/worker-dom/blob/main/ web_compat_table.md. Но может быть другой способ делать то, что вы хотите. Взгляните на amp.dev/documentation/examples/components / amp-fx-collection /. У меня есть (но не могу найти) пример, который сжимает заголовок при прокрутке, но исправляет текст заголовка. Отправлю ответ, когда найду его (сделано github.com/aghassemi 29.08.2020
@JayGray Дайте мне знать, сможете ли вы найти что-нибудь, потому что я могу найти все, что поддерживало бы это. Я пробовал использовать amp-position-observer, но он не позволяет переключаться между классами! 30.08.2020
Возможно, вы сможете адаптировать эти примеры (ни один из них не делает именно то, что вам нужно, но некоторые из них «близки»): 1) codepen .io / aghassemi / pen / jxvzzq 2) codepen.io/aghassemi/full/wyMEWP 3) codepen.io/aghassemi/full/EwrMoP 30.08.2020

Ответы:

Видимо, вы не понимаете, как работает amp-script, что странно, ведь в официальной документации есть примеры.

Попробуйте этот пример:

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-nPCFvs2yYOVX1DFcHvkEUY1aC6PdG8FAgPUG16rZwxfQJOPh_pM1rA-oUzDsg8pk" />
    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: white;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      .opaque {
        background-color: white;
        color: black;
      }

      .hero {
        height: max(25vh, 250px);
        width: 100vw;
        background: red;
      }

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }
    </style>
  </head>
  <body>
    <amp-script script="scroll-listener">
      <nav id="topnav">
        <h1>ACME Inc.</h1>
      </nav>
      <main id="main">
        <header class="hero"></header>
        <article>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
        </article>
      </main>
    </amp-script>

    <script id="scroll-listener" type="text/plain" target="amp-script">
      function myFunction(event) {
        console.log('scrolled!!');
      }
      window.addEventListener("scroll", myFunction);
    </script>
  </body>
</html>

Приведенный выше пример, вероятно, не поможет вам сделать то, что вы хотите, но, по крайней мере, теперь вы поймете, как работает amp-script.

amp-script часто требует запуска настраиваемого события и не будет работать сразу после загрузки страницы. Прочтите об этом здесь: https://amp.dev/documentation/components/amp-script/?format=websites#user-gestures

Для выполнения этой задачи я рекомендую вам использовать компоненты amp-position-Observer и amp-animation. Вот пример:

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: cyan;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      h1 {
        position: relative;
        z-index: 2;
      }

      .opaque {
        background-color: white;
        color: black;
      }

      .hero {
        height: max(25vh, 250px);
        width: 100vw;
        background: red;
      }

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }

      .scroll-effect {
        background-color: #fff;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .top-anchor {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="top-anchor">
      <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer>
    </div>
    <nav id="topnav">
      <span class="scroll-effect" id="scroll-effect"></span>
      <h1>ACME Inc.</h1>
    </nav>
    <main id="main">
      <header class="hero"></header>
      <article>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
      </article>
    </main>

    <amp-animation id="showAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [
                {
                  "opacity": "1",
                  "visibility": "visible"
                }
              ]
            }
          ]
        }
      </script>
    </amp-animation>
    <amp-animation id="hideAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [{ "opacity": "0", "visibility": "hidden" }]
            }
          ]
        }
      </script>
    </amp-animation>
  </body>
</html>

02.09.2020

Видимо, вы не знаете, как работает amp-position-Observer. Я сначала попытался использовать его, и он генерировал ошибки, когда я пытался переключать классы с его помощью. Это тоже известное ограничение, указанное в документации. 04.09.2020

@ ra9r Не пишите, что я не знаю, как что-то работает. В конце концов, я показал вам здесь рабочую демонстрацию, и я также использовал ее ранее. Все, что у вас есть в этом вопросе, - это пример неправильного использования amp-скрипта. Если вы говорите, что я чего-то не знаю, то приведите реальный рабочий пример, как это правильно сделать, а не просто говорить. 05.09.2020

Я всего лишь использовал тот же язык, что и ты. Обидно, не правда ли? Будьте внимательнее в будущем. Тем не менее, вы все еще не понимаете, что amp-position-Observer нельзя использовать для переключения классов. 07.09.2020

Я не пытался переключать классы. Вот ваш комментарий к вопросу: The header bar should change to a white background as soon as scrolling starts. ra9r Aug 28 at 18:05. Это именно то, что я реализовал. Вы, кажется, не помните, о чем писали. 07.09.2020

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP