如何將CSS添加到一旦它擊中頁面的頂部（滾動時）？

我想這樣做，當用戶向下滾動並達到某個div，例如#float，將該div設置爲margin-top：50px並且位置固定，並且用戶滾動備份以撤消這些更改。這很難理解，我知道）））如果你go to this page並注意側欄一旦滾動上下你會明白我的意思。如何將CSS添加到一旦它擊中頁面的頂部（滾動時）？

當您向下滾動第2張廣告卷軸時也會出現一個頁面。

我將如何實現與jQuery/CSS相同的功能？

來源

2011-12-23 Ilja

這是在jQuery中做的一種方法。

此代碼僅用於示例目的;幾乎可以肯定有幾個定期維護的jQuery插件可以爲你做這件事 - 檢查GitHub或DailyJS。

$(window).scroll(function() { 
    var styledDiv = $('#styledDiv'), 
     targetScroll = $('#float').position().top, 
     currentScroll = $('html').scrollTop() || $('body').scrollTop(); 

    styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll); 
});

以下是在上述行動的simple JSFiddle。

編輯：現在已將此代碼重構爲更優雅的解決方案。

編輯2：收到一封有關問題的電子郵件，我更新了上面的代碼，以便它也可以在Firefox中使用。由於$('body').scrollTop()在Firefox中不起作用（請參閱關於jQuery API page的註釋），因此我們需要檢查html和body元素。

來源

2011-12-23 18:10:22 isNaN1247

有一個問題，這條線是做什麼的？如果（$（document.body）.scrollTop（）> 50） – Ilja 2011-12-23 18:18:59

@IlyaKnaup我已經替換了這個現在... 50將是觸發事件的高度（在PX中）...在我的代碼現在，這是基於具有'浮動'id的'div'的位置，我也在這裏更新了小提琴（http://jsfiddle.net/sKm9w/1/） – isNaN1247 2011-12-23 18:22:05

這是在該網站上使用的相關jQuery/JavaScript代碼。

if (window.XMLHttpRequest) { 
    var topGagStay = $("top-gag-stay"); 
    var isLoggedIn = $("profile-menu") ? true : false; 
    var sidebarAdsTop = 1061 - 545; 
    var signupBtnOffset = 60; 
    var dockPos = 72; 
    if (!isLoggedIn && !GAG.isReadOnly()) { 
     sidebarAdsTop += signupBtnOffset 
    } 
    if (formMessageShown) { 
     sidebarAdsTop += formMessageOffset 
    } 
    if (topGagStay) { 
     if (document.documentElement.scrollTop > sidebarAdsTop || self.pageYOffset > sidebarAdsTop) { 
     if (topGagStay.style.position != "fixed") { 
      topGagStay.style.position = "fixed"; 
      topGagStay.style.top = dockPos + "px" 
     } 
     } else { 
     if (document.documentElement.scrollTop < sidebarAdsTop || self.pageYOffset < sidebarAdsTop) { 
      topGagStay.style.position = ""; 
      topGagStay.style.top = "" 
     } 
     } 
    } 
    }

謝謝螢火和http://jsbeautifier.org/的代碼（和9GAG當然）。

來源

2011-12-23 18:11:00 FakeRainBrigand

我已經嘗試了beardtwizzle的上述答案，它工作正常。當頁面滾動到頁面底部時，它也適用於這種情況。

看到工作demo /教程這裏

來源

2013-01-26 21:47:52 Jeyaganesh

如何將CSS添加到一旦它擊中頁面的頂部（滾動時）？

回答

相關問題