使用jquery和elementor向下滚动时，在两个div之间锁定一个div

Question

我想要一个在向下滚动时固定的div。但我希望我到达另一个div，固定的div将自己设置为静态位置。

这部分代码对我有效，但问题是，当我向上滚动时，div不想再次被修复。

这是我的代码：

<style>

#imageToMask{
-webkit-mask-image: url(https://refonte.tempurl.host/wp-content/uploads/2022/01/Agence-M-Com-Marseille-Creation-Site-Web-Internet-logo-m-com-seul.svg);
-webkit-mask-size: 18%;
-webkit-mask-position: center 40%;
-webkit-mask-repeat: no-repeat;
width: 100vw;
height: 100vh;

}

.fixed{
position: fixed;
top:0;
}

.static{
position: relative;
}

.align-end{
align-items: end;
}


</style>
<div style="height:100vh; width:100vw; display:flex; align-items:center;border:5px solid black;" id="containerToGet">
<img src="https://refonte.tempurl.host/wp-content/uploads/2022/01/Agence-M-Com-Marseille-Creation-Site-Web-publicite-communication-internet7.jpg" id="imageToMask"/>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery;
let imageStyle = document.getElementById('imageToMask');
var imageOffset = $('#containerToGet').offset().top;
var sectionOffset = $('#sectionMask').offset().top;


$(document).scroll(function(){
let currentScroll = $(this).scrollTop();
let imageBottom = $('#containerToGet').offset().top + $('#containerToGet').outerHeight();
let sectionBottom = $('#sectionMask').offset().top + $('#sectionMask').outerHeight();
let cy = imageOffset + $('#containerToGet').height()/2;

let distance = ($('#containerToGet').offset().top) - currentScroll


if(currentScroll >= imageOffset){
imageStyle.style.webkitMaskSize = 18 + (window.pageYOffset - imageOffset)/Math.exp(1) + '%';
$('#containerToGet').addClass('fixed');
}
else if(currentScroll < imageOffset ){
$('#containerToGet').removeClass('fixed');
}

if(imageBottom >= sectionBottom){
$('#containerToGet').removeClass('fixed').addClass('static');
$('#columnToGet').addClass('align-end');

}


})
</script>

如果你想要一些补充信息，请问我一些问题！

感谢您的帮助

Answer 1

我真的不明白你想要什么，但我认为你真的想看看这个。

p {
display: block;
margin: 10px 5px;
}
div {
display: block;
margin: 10px 5px;
padding: 5px 10px;
background: #FF0000;
position: sticky;
top: 0px;
color: #fff;
}

<div class="sticky_div"><h1>DIV 1</h1></div>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<div class="sticky_div"><h1>DIV 2</h1></div>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<div class="sticky_div"><h1>DIV 3</h1></div>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<div class="sticky_div"><h1>DIV 4</h1></div>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<div class="sticky_div"><h1>DIV 5</h1></div>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<p>CONTENT FROM DIV</p><br>
<div class="sticky_div"><h1>DIV 6</h1></div>