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保留在其位置。