固定在第一個div第三格向下滾動

後，我試圖滾動100像素下來後把右下#fixed_header_top格#fixed_header_bottom格但未能如願。 #fixed_header_middle div顯然會在上下滾動時出現和消失，並且只有當（例如向下滾動結束）時纔會顯示#fixed_header_top，#fixed_header_bottom和#body_block。固定在第一個div第三格向下滾動

JSFIDDLE is here

在第二圖像，#fixed_header_middle完全消失，但向上滾動時會開始出現。

感謝

enter image description here

來源

2014-01-08 BentCoder

'.removeAttr（ '風格'）;'是擺脫你的固定位置的粗重的方式。我會爲這個位置創建一個類並使用'.addClass（）'和'.removeClass（）' –

這就是我正在尋找這個部分的原因。我以前用過它，但不記得了。謝謝。 – BentCoder

查看我的答案，下面是使用'addClass（）'/'removeClass（）'和佔位符div來避免跳動問題的解決方案。您的IE問題是由於您使用的jQuery版本。 –

首先，您需要爲頭文件設置一個top樣式，以便它們處於正確的位置，您應該考慮採用更健壯的方法來執行此操作。

另一種考慮這樣做的方法是製作底部標題的隱藏副本。

然後，只需在滾動位置正確時隱藏/顯示它。這種方法避免了任何滑稽業務與滾動條作爲元件被放入和取出該頁面的滾動部分的（因爲原來仍然存在）;改變尺寸和/或位置：

JSFiddle Demo

的更好的方法是簡單地讓你顯示/隱藏的底部集流管固定/非固定的佔位符：

<div id="fixed_header_top">fixed_header_top</div> 
<div id="fixed_header_middle">fixed_header_middle</div> 
<div id="fixed_header_bottom">fixed_header_bottom</div> 
<div id="fixed_placeholder">Shouldn't ever see me</div>

JS：

$(document).ready(function() { 
    $(window).bind("scroll", function (e) { 
     if(!$('#fixed_header_bottom').hasClass('fixed')) { 
      if ($(document).scrollTop() >= 100) { 
       $('#fixed_placeholder').show(); 
       $('#fixed_header_bottom').addClass('fixed'); 
      } 
     } else { 
      if ($(document).scrollTop() < 100) { 
       $('#fixed_placeholder').hide(); 
       $('#fixed_header_bottom').removeClass('fixed'); 
      } 
     } 
    }); 
});

CSS：

#fixed_header_bottom, #fixed_placeholder { 
    display: block; 
    width: 100%; 
    height: 50px; 
    background-color: #11DD55; 
} 
#fixed_placeholder { 
    display: none; 
} 
.fixed { 
    position: fixed; 
    top: 50px; 
}

JSFiddle Demo

來源

2014-01-08 18:24:09

@MadMax我更新了上面例子中的jQuery版本。您正在加載版本1.1，它在IE中沒有處理'scrollTop（）'。 –

謝謝。我將使用第二個JSF，因爲它在所有瀏覽器中都能正常工作，但是第一個不在「病態」IE中。 – BentCoder

此代碼的工作，因爲它應該。

你的問題是你沒有設置任何top屬性，所以它保持在原來的最高位置。

相同小提琴與jQuery 1.8.3（如1.10不處理scrollTop的（），用於IE法））：http://jsfiddle.net/h8H6N/4/

我添加top: 0;到報頭頂部，top: 50px;至底部標題，假設這是在渲染你正在尋找。

來源

2014-01-08 17:55:59 enguerranws

FF - 有一個跳躍，IE，SAFARI - 沒有工作，CHROME - 工作正常。任何修復使跨瀏覽器和不跳？謝謝 – BentCoder

我在FF 26上，Windows，工作正常（如Chrome）。我看到了IE中的錯誤，我正在使用它。 – enguerranws

你沒有把jQuery放在你的小提琴上。檢查這個：http：//jsfiddle.net/h8H6N/4/ – enguerranws

固定在第一個div第三格向下滾動

回答

相關問題