I'm trying to make my logo appear in my header when i scroll down. It works normally on a simple html page but it does not work on Odoo Website.
In odoo website I placed my JS file like this in 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>
My manifest is ok and i call my layout.xml and my assets.xml
I don't really understand why it don't works... but here is an exemple of my code.
<!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>Can someone help me to understand why ? Thanks