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

Question

我一直在尝试将div固定到屏幕顶部，但由于某种原因它无法正常工作。 搜索许多答案后，我认为可能是因为$（window）.height（）在Chrome上返回的值不正确。

我要在网站上完成的操作是，当我向下滚动时，将一块文本粘贴（固定）在窗口的中间，然后在其底部与页面内联时在页面的后面进行修复一个图像。 我将通过在透明div中垂直对齐文本来实现此目的，该透明div与将在到达屏幕顶部时固定的视口（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确实会固定在顶部。