如何在滚动 div 上切换固定位置 class？

Question

多年来，我一直在尝试将 div 滚动到屏幕顶部，但由于某种原因无法正常工作。在搜索了很多答案后，我认为这可能是因为 $(window).height() returns 在 Chrome.

上的值不准确

我想在我的网站上完成的是当我向下滚动到 window 中间时，将一段文本粘贴（修复），然后在稍后取消修复当它的底部与图像内联时页面。我将通过垂直对齐透明 div 中的文本来做到这一点，该透明 div 与视口 (100vh) 高度相同，当它到达屏幕顶部时将固定，并在到达屏幕底部时取消固定 div 触及另一个透明 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() {

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

如何在滚动 div 上切换固定位置 class？

How to toggle a fixed position class on a div on scroll?

javascript

css

jquery

scroll

toggleclass