粘贴或固定覆盖到可滚动div-JavaScript的可见区域

我有一个聊天框的代码，可以滚动添加消息。 我必须在上面显示一个覆盖图，它不应该随着消息向上滚动，如果在添加消息时滚动聊天框，它应该停留在消息上方

<style>
  #overlay {
   display: none;
   width:100%;
   height: 100%;
   background-color: rgba(0,0,0,0.8);
   z-index: 2;
   cursor: pointer;
   position: absolute;
   bottom: 0;

}
 .chat-area {
  background-color:#f3f3f3;
  height: 75px;
  overflow-y:auto;
  position:relative
}
<style>

<div class="chat-area" id="chat-area">
    <div id="overlay">
        <div class="warning">Registro requerido para chatear
        <a href="http://trackstuff.net/path/out.php" target="_blank">Regístrate ahora</a></div>    
    </div><!-- overlay -->
    <div class='row chat-entered'>
        <div class='isTyping'><a href="http://trackstuff.net/path/out.php" class="is-typing-link">SexySlut22</a> está escribiendo......</div>
    </div>  
</div><!-- chat-area -->

我已尝试将位置固定为覆盖它会使其消失。。 请让我知道，如果有一个解决方案在JS或CSS。非常感谢诸如此类的事情

setInterval（函数（）{
让messages=document.getElementById（'messages'）；
messages.innerHTML=messages.innerHTML+
'' + 
“：”+Math.random（）+“”+
'';
让objDiv=document.getElementById（“消息”）；
objDiv.scrollTop=objDiv.scrollHeight；
}, 400);
#覆盖{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
位置：绝对位置；
底部：0；
颜色：白色；
}
#覆盖{
颜色：白色；
文字装饰：下划线；
}
.警告{
位置：绝对位置；
顶部：50%；左侧：0
转换：translate3d（-50%，0，0）；
文本对齐：居中；
宽度：100%；
显示：块；
}
.聊天区{
显示：块；
背景色：#F3；
职位：相对
}
#信息{
溢出：隐藏；
高度：200px；
}

JS-Bin
注册登记处（注册登记处）。。。。。。
@NadeemGorsi只需将溢出更改为隐藏即可
let objDiv = document.getElementById("chat-area");
    objDiv.scrollTop = objDiv.scrollHeight;