从HTML事件运行javascript函数

我正在做一个在滚动页面上制作动画的项目。 这是我要设置动画的元素

<h1 style="position: relative; top: 0; left: 0;"
        onscroll="animateAfterPosition(200)"
        data-animate-left="50px" data-animate-top="50px" 
        data-animate-time="0.2s">Animation on scroll</h1>

我需要从html运行函数animateAfterPosition。我希望使用onscroll事件运行该函数，但它不起作用。那我该怎么做呢

编辑
我发现css attr（）只处理

content:

属性，我设法用JavaScript实现了这一点，这是一个最低限度的解决方案

function animateAfterPosition(scroll) {
console.log(scroll);
    function(){ 
        if (window.scrollY <= scroll) {
            this.classList.add('animateAfterPosition');
        } else {
            this.classList.remove('animateAfterPosition');
        }}

您可以使用函数中的前4个变量对其进行配置。我建议将indicator类添加到body本身，然后使用类似于

body.beyond-that-point h1的选择器。通过这种方式，可以在滚动时使多个标记的行为不同

你可以在这里测试
这个版本使用了更为奇特的效果，但背后的逻辑是相同的。



body.beyond-that-point{背景：银色；}
div.text{填充：75vh 0px；文本对齐：居中；}
向下滚动我，背景就会改变
setTimeout（函数（）{
var amount=100；//奇迹发生前有多少像素
var beyondClass='超出该点'；//将添加该类
var targetSelector='body'；//要将类添加到哪个元素
var checkMS=20；//每N毫秒检查一次滚动位置
var eClass=document.querySelector（targetSelector）.classList；
setInterval（函数（）{
var y=window.scrollY；
var c=超越等级；
var isBeyond=！！（y>=金额）？1:0；
if（isBeyond==1）if（！eClass.contains（c））eClass.add（c）；
if（isBeyond==0）if（eClass.contains（c））eClass.remove（c）；
}，支票）；
},1);

注意：有更好的方法来检查DOM就绪性，但为了简单起见，我在这里使用了
setTimeout
。请随意更改。
一个极简的解决方案
您可以使用函数中的前4个变量对其进行配置。我建议将indicator类添加到body本身，然后使用类似于
body.beyond-that-point h1的选择器。通过这种方式，可以在滚动时使多个标记的行为不同

你可以在这里测试
这个版本使用了更为奇特的效果，但背后的逻辑是相同的。



body.beyond-that-point{背景：银色；}
div.text{填充：75vh 0px；文本对齐：居中；}
向下滚动我，背景就会改变
setTimeout（函数（）{
var amount=100；//奇迹发生前有多少像素
var beyondClass='超出该点'；//将添加该类
var targetSelector='body'；//要将类添加到哪个元素
var checkMS=20；//每N毫秒检查一次滚动位置
var eClass=document.querySelector（targetSelector）.classList；
setInterval（函数（）{
var y=window.scrollY；
var c=超越等级；
var isBeyond=！！（y>=金额）？1:0；
if（isBeyond==1）if（！eClass.contains（c））eClass.add（c）；
if（isBeyond==0）if（eClass.contains（c））eClass.remove（c）；
}，支票）；
},1);

注意：有更好的方法来检查DOM就绪性，但为了简单起见，我在这里使用了
setTimeout
。请随意更改。
您需要添加选择器来切换动画。而且您当前的css没有足够的高度来创建滚动窗口。下面是一个简单的代码片段，用于运行函数onload、updateonscroll和切换类


var dataAnimate=document.querySelector（“[data animate]”）；
函数animateAfterPosition（滚动）{
dataAnimate.classList.toggle（'active'，window.scrollY您需要添加选择器来切换动画类。并且您当前的css没有足够的高度来创建滚动窗口。下面是一个简单的代码片段，用于运行函数onload、update onscroll和toggling类


var dataAnimate=document.querySelector（“[data animate]”）；
函数animateAfterPosition（滚动）{
dataAnimate.classList.toggle（'active'，window.scrollY
就像这样，普通元素没有“onload”。body标记、脚本标记和jQuery onload模式都可以帮助您。EventListeners最适合在元素或事件上触发JS:
h1.onscroll=function（）{myScrollFunction}
相关：
确实，普通元素没有“onload”。body标记、script标记和jQuery onload模式都会对您有所帮助。EventListeners最适合在元素或事件上触发JS:
h1.onscroll=function（）{myScrollFunction}；
相关：
.animateAfterPosition {
transition: attr(data-animate-time);
left: attr(data-animate-left);
top: attr(data-animate-top);}