时间戳

首页 > 解决方案 > OdooV14 - 在向下滚动时显示标题徽标

javascript - OdooV14 - 在向下滚动时显示标题徽标

问题描述

当我向下滚动时，我试图让我的徽标出现在我的标题中。它在简单的 html 页面上正常工作，但在 Odoo 网站上不起作用。

在 odoo 网站中，我将我的 JS 文件放在 assets.xml 中：

<template id="assets_editor" name="Vichysport's Script" inherit_id="website.assets_editor" priority="1">
    <xpath expr="script[last()]" position="after">
        <script type="text/javascript" src="/vichysport/static/js/template.js"/>
    </xpath>
</template>

我的清单没问题，我调用了 layout.xml 和 assets.xml

我真的不明白为什么它不起作用......但这是我的代码的一个例子。

<!DOCTYPE html>
<html>

<head>
  <style>
    #LogoSvg {
      opacity: 0;
      position: fixed;
      margin: 1% auto; /* Will not center vertically and won't work in IE6/7. */
      left: 0;
      right: 0;
    }
  </style>
  <script>
    window.onscroll = function() {hideornot()};

    function hideornot() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("LogoSvg").style.opacity = "100%";
      } else {
        document.getElementById("LogoSvg").style.opacity = "0%";
      }
    }
  </script>
</head>


<body style="height:1500px">

  <p>Scroll down this page</p>

  <svg id="LogoSvg" xmlns="http://www.w3.org/2000/svg" width="83.999" height="84" viewBox="0 0 83.999 84">
    <g id="Groupe_9299" data-name="Groupe 9299" transform="translate(549.139 66.665)">
       <rect id="Rectangle_2908" data-name="Rectangle 2908" width="27.998" height="28.001" transform="translate(-549.139 -66.665)" fill="#0e3144"></rect>
       <rect id="Rectangle_2909" data-name="Rectangle 2909" width="27.998" height="28.001" transform="translate(-493.14 -66.665)" fill="#0e3144"></rect>
       <rect id="Rectangle_2910" data-name="Rectangle 2910" width="27.998" height="27.998" transform="translate(-549.139 -10.663)" fill="#0e3144"></rect>
       <rect id="Rectangle_2911" data-name="Rectangle 2911" width="27.998" height="27.998" transform="translate(-493.14 -10.666)" fill="#0e3144"></rect>
    </g>
  </svg>

</body>

</html>

有人可以帮我理解为什么吗？谢谢

标签： javascripthtmltemplatesodooassets

解决方案

推荐阅读