Div位置：固定。 絕對何時有一定長度？

Question

我目前正在制作一個網站，其中包含“支持實時” div，將在滾動時跟隨用戶。 所以我給了它Position: Fixed; 一切正常。

但是，當用戶向后滾動時，我希望Support div停止以免它“觸碰”標題。

這是一張希望可以更容易理解的圖片：

http://gyazo.com/2694b03181a39c3b6673901b42b5952d我希望黃色div停止與圖片中的橙色字段對齊。 但是，當用戶再次開始向下滾動時，它將跟隨。

我最好的問候菲利普

Answer 1

這將需要一些JQuery才能正常工作： JSFIDDLE

JQuery的

$(document).on("scroll", function() {    
  if($(document).scrollTop() < 100) { 

 $('#alert').addClass("absolute");

} else if($(document).scrollTop() > 100) {  //100 is the height of your header. Adjust if needed
 $('#alert').removeClass("absolute");

} 
});

CSS

.absolute {
top: 100px; //same as the value in the conditions
position: absolute;

}


#alert{

background-color: #FF0;     
float: left;    
height: 400px;  
width: 230px;   
margin-left: 20px; 
    position: fixed;
z-index:999;


}

HTML

<div id="alert" class="absolute"> </div> 
/!-- add the class so that it doesn't mess up the layout when you load the page --!/

srolltop函數檢查視口和文檔頂部之間有多少空間。 當到#alert頭的高度時，將應用absolute類，以將#alert div保留在其位置。