如何在滾動上切換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上的固定位置類？

回答

相關問題