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

如果你想知道，我发现了什么问题。这是谷歌Chrome的问题，因为jQuery在Safari中工作但不在Chrome中。我通过替换

修复了它

$(document).ready(function() {

带

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

现在，当我向它添加类.fix时，div确实修复了顶部。

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

1 个答案: