我是否正确地编写JavaScript web动画？

因此，我正在构建一个需要web动画的网站，在我最初的开发中，我使用jQuery来构建动画，但是我被告知jQuery正在成为一种古老的做法，并决定切换到vanilla JavaScript，但是我不确定我是否使用了最佳实践来实现这一点。因此，以下是我的代码：

window.onscroll=function top(){
    var totalDuration=250;//total desired duration of animation
    var img=document.getElementById("image");
    var objective=document.getElementById("objective");
    var header=document.getElementsByTagName("header");
    var newHeaderHeight=.25*window.innerHeight;
    var newImageMargLeft=.15*window.innerHeight;
    var newImageMargTop=.01*window.innerHeight;
    var origHeaderHeight=window.getComputedStyle(header[0],null).getPropertyValue("height");
    var origImageMargLeft=window.getComputedStyle(img,null).getPropertyValue("margin-left");
    var origImageMargTop=window.getComputedStyle(img,null).getPropertyValue("margin-top");
    origHeaderHeight=origHeaderHeight.substring(0,origHeaderHeight.length-2);
    origImageMargLeft=origImageMargLeft.substring(0,origImageMargLeft.length-2);
    origImageMargTop=origImageMargTop.substring(0,origImageMargTop.length-2);
    var headerFactor=((newHeaderHeight-origHeaderHeight)/totalDuration);
    var imgMargLeftFactor=((newImageMargLeft-origImageMargLeft)/totalDuration)*5;
    var imgMargTopFactor=((newImageMargTop-origImageMargTop)/totalDuration)*5;
    var id=setInterval(func,250);
    function func(){
        if (window.scrollY>window.innerHeight*.1){
            if (header[0].style.height===newHeaderHeight){
                id=clearInterval();
            }
            else{
                header[0].style.height=window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)-headerFactor;
                img.style.marginTop=window.getComputedStyle(img,null).getPropertyValue("margin-Top")-imgMargTopFactor;
                img.style.marginLeft=window.getComputedStyle(img,null).getPropertyValue("margin-Left")-imgMargLeftFactor;
                console.log("Header: "+(parseFloat(window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)))-4);
                console.log("Margin Top: "+typeof(4));
                console.log("Margin Left: "+img.style.marginLeft);
            }
        }

我知道它看起来很混乱，这就是我害怕的

我基本上是在尝试设置标题栏的动画，该标题栏在滚动条滚动过某个点后会折叠。但是，我有多个元素在其中，我想折叠和操纵它们，而不仅仅是保持其缩放（即，折叠时更改边距，扩展时设置回原始边距，所有这些都是同时完成的，从用户的角度来看，是均匀的

---

我还有一个后续问题，是否值得在香草JavaScript中使用它？或者我应该学习一个框架吗？如果是，是哪一个，以及为什么要在香草JavaScript上使用框架，即使在我做了所有的研究之后，我仍在努力理解为什么学习这些框架对于web开发如此重要，如果它们最初是基于JavaScript构建的放置（参考vue或react等）

嘿，我想我需要戴眼镜来阅读。你听说过Web动画API吗？（）。它不仅比这个干净得多；它还利用了你迭代自己的样式更改而失去的效率。它在Chrome、Firefox和Opera中都可用，并且有一个适用于所有其他主要浏览器的轻型多边形填充。这是vanilla JS的一部分吗？是的。这是一个工作草案，但我相信API是稳定的。我在需要广泛浏览器支持的生产环境中使用它。此外，在每个“滚动”事件上设置一个新的间隔计时器将导致浏览器几乎立即停止，因为“滚动”当您上下滚动页面时，事件会很快触发。@Sal，将

fill:'forwards'

添加到您的选项中。编辑：请参阅文档。