如何改进此javascript电梯/视差/固定元素函数

我在万维网上搜索javascript函数“pin parallax scroll event”或任何你想称之为的东西

有一个解决方案，但它有一个设定值。很多时候你不知道内容的实际高度

找不到适合我需要的解决方案，所以我在jQuery中构建了自己的解决方案

尽管我的解决方案并不完美。当启动scroll事件时，它会感觉迟钝，您可以看到电梯元素移动了一小会儿（大约200毫秒）

有人知道如何改进这一点吗

      $(window).scroll(function (){

        var currentPos = $(document).scrollTop(); // Our current position

        console.log(currentPos); //So we can se our current position in the console

        var targetElemTopPos = $("#elevator .right").offset().top; //Value of our targets top position
        var targetElemenBotPos = $("#elevator .right").outerHeight(); //Total of our targets height
        var targetLeftBosPos = $("#elevator .left").outerHeight(); //Total value of our elevator

        var amountOfTop = targetElemenBotPos - targetLeftBosPos; //Calc the difference from sections top to elevators top

        //The elevator algorithm
        if ( (currentPos > targetElemTopPos) && (currentPos < targetElemenBotPos) ) {
            //If the current position is greater than targets top position
            //AND if the current position is less than targets bottom position
            //Start the elevator
            console.log('Elevator in movement');
            $('#elevator .left').addClass('fixed');
            $( '#elevator .left' ).css( 'top', 0 );
        } else if (currentPos > targetElemTopPos) {
            //Howeaver if the current position is greater than targets bottom position
            // Stop the elevator and push it down so we can take the elevator up later if we want to
            console.log('Elevator has reached the destination');
            $('#elevator .left').removeClass('fixed');
            $( '#elevator .left' ).css( 'top', amountOfTop );
        } else {
            //Else just let the elevator wait on a passanger
            console.log('Elevator on standby');
            $('#elevator .left').removeClass('fixed');
            $( '#elevator .left' ).css( 'top', 0 );
        }
      });

$（窗口）。滚动（函数（）{
var currentPos=$（document）.scrollTop（）；//我们当前的位置
console.log（currentPos）；//因此我们可以在控制台中使用当前位置
var targetElemTopPos=$（“#lifter.right”）.offset（）.top；//目标顶部位置的值
var targetElemenBotPos=$（“#lifter.right”）.outerHeight（）；//目标高度的总和
var targetleftbos=$（“#lifter.left”）.outerlight（）；//我们的电梯的总价值
var amountOfTop=targetElemenBotPos-targetleftbos；//计算段顶到段顶的差值
//电梯算法
如果（（当前位置>TargetElementTopPos）和&（当前位置目标位置）{
//如果当前位置大于目标底部位置，则为Howeaver
//把电梯停下来，把它推下去，如果我们想的话，我们可以稍后乘电梯上去
console.log（“电梯已到达目的地”）；
$（“#lifter.left”）.removeClass（'fixed'）；
$（'#lifter.left'）.css（'top'，amountOfTop）；
}否则{
//否则就让电梯等乘客吧
控制台日志（“电梯待命”）；
$（“#lifter.left”）.removeClass（'fixed'）；
$（'#lifter.left'）.css（'top'，0）；
}
});

---

（lagg在全屏和Safari中更为明显）

我不喜欢JQuery，但您可以尝试以下普通代码： 它还可以处理粘性元素的内容高度大于屏幕的情况，并且只对多个实例使用一个滚动侦听器

（函数（全局、文档、未定义）{
"严格使用",；
常量滚动方向={
向上：-1，
下降：1
};
var ticking=false；
var currentScrollPosition=0；
var lastScrollPosition=0；
方向向量=1；
var stickies=[]；
功能粘滞滚动（选择器、选项）{
var self=这个；
var目标=null；
var parent=null；
选项=选项| |{}；
options=Object.assign（{}，self.defaults，options）；
目标=document.querySelector（选择器）；
如果（！target）返回；
self.targetSnapshot=target.getBoundingClientRect（）；
parent=target.parentNode；
if（options.boundTo）{
父项=document.querySelector（options.boundTo）；
}
self.uid=StickyScroll.uid++；
自我目标=目标；
self.parent=parent；
self.options=选项；
胶粘物[self.uid]=self；
}
StickyScroll.UID=0；
StickyScroll.prototype.Default={
boundTo:null，
方向偏移：50
}
StickyScroll.prototype.update=函数（）{
var targetRect=this.target.getBoundingClientRect（）；
var parentRect=this.parent.getBoundingClientRect（）；
var targetHeight=targetECT.height；
var targetBottom=currentScrollPosition+TargetLight；
var parentHeight=parentRect.height；
var parentTop=this.parent.offsetTop；
如果（currentScrollPosition>lastScrollPosition+this.options.directionOffset）{
scrollDirection=向下滚动\u方向；
lastScrollPosition=当前ScrollPosition；
}else if（currentScrollPositionparentTop&&targetBottom=parentHeight+parentTop）{
this.target.style.position='absolute'；
this.target.style.top=null；
this.target.style.bottom=0；
this.parent.style.position='relative'；
}否则{
this.parent.style.position=null；
this.target.style.position=null；
this.target.style.top=null；
this.target.style.bottom=null；
}
滴答声=假；
}
global.addEventListener（'scroll'，函数（事件）{
粘性。forEach（函数（粘性）{
如果（！滴答声）{
currentScrollPosition=document.body.scrollTop；
window.requestAnimationFrame（sticky.update.bind（sticky））；
滴答声=真；
}
});
});
global.stickycroll=stickycroll；
})（窗口、文件）
设x=new StickyScroll（“#lifter.left”）；//初始化
设y=new StickyScroll（'#dd'）；//不应初始化

body，html，h1，h2，h3，p{
填充：0；
保证金：0；
字体系列：无衬线；
}
标题{
背景色：#1abc9c；
}
收割台h1{
颜色：#fff；
文本对齐：分
if ( (currentPos > targetElemTopPos) && (currentPos < targetElemenBotPos) )

if ( (currentPos >= targetElemTopPos) && (currentPos <= targetElemenBotPos) )