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

我一直在尝试修复这个div到我的屏幕顶部，当我滚动到它，但它不工作的原因。在搜索很多答案时，我认为这可能是因为$（window）.height（）在Chrome上返回不准确的值。如何在滚动上切换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; 
}

来源

2015-10-19 Leon KC

不完全遵循你想要的和抱歉，我没有太多时间花在它上面 - 但我注意到你没有准备好关闭文档。 }）;在你的JavaScript的结尾是关闭窗口滚动 - 你需要另一个}）;之后在另一条线上关闭文件准备就绪。这可能不会解决您的问题，但它肯定会有所帮助！ –

对不起，我其实有一个}）;在最后，但不知何故在代码框中错过了它。我现在编辑它。而我想要的是当div到达窗口顶部时修复，当它到达另一个图像的末尾时，在页面中解除修复，如果有帮助的话。不管怎么说，还是要谢谢你！ –

只是好奇，因为你想要一个响应式解决方案，你有没有考虑过使用Bootstrap？它具有与附加组件一起构建的此功能。 – dman2306

我发现什么地方出了问题，如果你想知道。这是Google Chrome的一个问题，因为jQuery在Safari中工作，但不是Chrome。我用

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

现在股利不固定到顶部时，我添加类.fix给它更换

$(document).ready(function() {

固定它。

来源

2015-10-26 12:16:55

这实际上已被弃用，最好使用'$（window）.on（'load'，function（）{'。 – Shikkediel

哦，我不知道。谢谢告诉我！@Shikkediel –

没有biggie，它会现在仍然有效，但可能会在某个时候被删除，如果你有几分钟时间想要阅读更多关于如何优化这类内容的内容，你可以看看这篇文章：http：// stackoverflow.com/a/33264826/3168107。 – Shikkediel

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

回答

相关问题