使用 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>