javascript - 如何在滚动的 div 上切换固定位置类？

Question

多年来，我一直在尝试在滚动到它时将此 div 修复到屏幕顶部，但由于某种原因它不起作用。搜索了很多答案，我认为这可能是因为 $(window).height() 在 Chrome 上返回的值不准确。

我想在我的网站上完成的是当我向下滚动到窗口中间时，将一段文本粘贴(固定)在窗口中间，然后在页面底部时取消固定与图像内联。我将通过垂直对齐透明 div 中的文本来做到这一点，该文本与视口(viewport) (100vh) 的高度相同，当它到达屏幕顶部时将固定，并在该 div 的底部触及屏幕顶部时取消固定另一个在图像结束时开始的透明 div。

解决方案必须是响应式的，因为我计划让网站在所有平台上运行。任何帮助，将不胜感激。这是我的代码 - 它对我不起作用:

JQuery

$(document).ready(function() {
    var s = $("#words_box");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos <= pos.top) {
            s.addClass("fix");
        } else {
            s.removeClass("fix"); 
        }
    });
});

HTML

<div id="words_box">

    <h2 id="about_words">Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </h2>

</div>

<img id="about_words" src="any image that takes up the right side of the viewport."/>

CSS

#about_words {
    float:left;
    margin-right: 52.5%;
    font-size:2.17vw;
    text-align:left !important;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}   

#words_box {
    height: 100vh;
    text-align:center;
    float:left; 
    margin-top:-10.4em;
    position:static;
    z-index:-10000;
}

.fix{
    position:fixed !important;
    margin-right: 5.555555%;
    top:10.4em;
}

Answer 1

如果您想知道的话，我已经找到了问题所在。这是 Google Chrome 的一个问题，因为 jQuery 在 Safari 中工作，但在 Chrome 中不工作。我通过替换

修复了它

$(document).ready(function() { 

与

$(window).on('load', function() {

现在，当我向其添加类 .fix 时，div 会固定到顶部。