Div位置：固定。绝对一定距离的时候？

Question

我目前正在建立一个网站，其中包含＆＃34;支持就是现场＆＃34;滚动时将跟随用户的div。所以我给了它Position: Fixed;，一切正常。

但是当用户向上滚动时，我希望支持div停止，这样它就不会触及＆＃34;标题。

这张图片希望能让您更容易理解：

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函数检查视口与文档顶部之间的空间大小。当它达到标题的高度时，会应用类absolute以保持#alert div的位置。