admin管理员组

文章数量:1122832

For example I have a simple animation which decreases the menu height and font-size while scrolling.

<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function (){
    document.addEventListener("scroll", function (){
        var header = document.querySelector("header");
        var t = document.body.scrollTop;
        var minT = 0;
        var maxT = 400;
        var minFs = 36;
        var maxFs = 24;
        var minHh = 50;
        var maxHh = 35;
        var fs = Math.round(minFs + (maxFs-minFs)*(Math.min(t,maxT)-minT)/(maxT-minT));
        var hh = Math.round(minHh + (maxHh-minHh)*(Math.min(t,maxT)-minT)/(maxT-minT));
        header.classList.add("scrolling");
        header.style.fontSize = fs+"px";
        header.style.height = hh+"px";
    });
    document.addEventListener("scrollend", function (){
        var header = document.querySelector("header");
        header.classList.remove("scrolling");
    });
});
</script>
<style>
header {
    position: fixed;
    height: 50px;
    width: 100%;
    background-color: red;
    color: green;
    z-index: 999;
    margin: 0px;
    border: 0px;
    padding: 10px;
    font-size: 36px;
}
header.scrolling {
    color: yellow;
}

main {
    position: absolute;
    top: 60px;
}
</style>
</head>
<body>
<header>something</header>
<main>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</main>

This is fine, but I made the page and header with Elementor. What is the best practice to apply this script on that elementor made header menu? Is there a recommended selector for certain parts of the page? Should I use it in shortcode or just enqueue the javascript file from a plugin? I am really curious how you usually apply javascript on certain parts of the page and the advantages certain solutions have.

For example I have a simple animation which decreases the menu height and font-size while scrolling.

<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function (){
    document.addEventListener("scroll", function (){
        var header = document.querySelector("header");
        var t = document.body.scrollTop;
        var minT = 0;
        var maxT = 400;
        var minFs = 36;
        var maxFs = 24;
        var minHh = 50;
        var maxHh = 35;
        var fs = Math.round(minFs + (maxFs-minFs)*(Math.min(t,maxT)-minT)/(maxT-minT));
        var hh = Math.round(minHh + (maxHh-minHh)*(Math.min(t,maxT)-minT)/(maxT-minT));
        header.classList.add("scrolling");
        header.style.fontSize = fs+"px";
        header.style.height = hh+"px";
    });
    document.addEventListener("scrollend", function (){
        var header = document.querySelector("header");
        header.classList.remove("scrolling");
    });
});
</script>
<style>
header {
    position: fixed;
    height: 50px;
    width: 100%;
    background-color: red;
    color: green;
    z-index: 999;
    margin: 0px;
    border: 0px;
    padding: 10px;
    font-size: 36px;
}
header.scrolling {
    color: yellow;
}

main {
    position: absolute;
    top: 60px;
}
</style>
</head>
<body>
<header>something</header>
<main>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</main>

This is fine, but I made the page and header with Elementor. What is the best practice to apply this script on that elementor made header menu? Is there a recommended selector for certain parts of the page? Should I use it in shortcode or just enqueue the javascript file from a plugin? I am really curious how you usually apply javascript on certain parts of the page and the advantages certain solutions have.

  • plugin-development
  • javascript
Share Improve this question asked May 10, 2024 at 19:08 inf3rnoinf3rno 1356 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I did not find any standard solution except HTML5, so I keep it as it is and change the header height and font size. For other parts I think actions and filters are a good guiding line.

(The above script won't work in strict mode, it requires document.documentElement.scrollTop.)

本文标签： plugin developmentHow to apply a javascript code on certain parts of elementor made pages

版权声明：本文标题：plugin development - How to apply a javascript code on certain parts of elementor made pages? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736307425a1933309.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。