Javascript Div位置：固定。绝对距离是多少？

我目前正在制作一个带有“Support is Live”div的网站，它将在用户滚动时跟踪用户。所以我给了它

位置：Fixed一切正常

但是，当用户回滚时，我希望Support div停止，这样它就不会“接触”标题

下面是一幅让人更容易理解的图片：


我希望黄色的div与图片上的橙色区域对齐。但是，当用户再次开始向下滚动时，它就会跟着滚动

我的问候
Philip这需要一些JQuery才能正常工作：

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");

} 
});

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函数检查视口和文档顶部之间的空间大小。当到达收割台高度时，会应用一个class
absolute
，以保持
#alert
div在其位置。
嗨，我这样做对吗
$（document）.on（“scroll”，function（）{if（$（document）.scrollTop（）>0）{//如果滚动超过0像素$（'#alert'）.addClass（“supRuta”）；}否则$（'#alert'）.removeClass（“supRuta”）；}）
似乎对我不起作用，但我对Jquery也很陌生。这里是.supRuta的类：
.supRuta{背景色：#FF0；float:left；高度：400px；宽度：230px；左边距：20px；位置：fixed；}
我更新了我的答案，尝试一下这段代码，告诉我它是怎样的，感谢您花时间：=）仍然不起作用，但这是我现在的代码：
$（文档）。在（“scroll”上，函数（{if（$（文档）。scrollTop（）==0）{$（'#SupRuta'）。addClass（“绝对”）；}否则如果（$（文档）。scrollTop（）>100）{//100是标题的高度。如果需要，请调整$（'#SupRuta'）。removeClass（“绝对”）;  }  });  我将SupRuta设置为一个ID，因为这就是Jquery中的#的用途？还是我完全错了？：=）我很快会给你一个更详细的描述。好的，我已经更新了我的答案并测试了解决方案。这是一个小问题-
<div id="alert" class="absolute"> </div> 
/!-- add the class so that it doesn't mess up the layout when you load the page --!/