Javascript 滚动然后捕捉到顶部，而不是取消捕捉

我正在尝试创建覆盖整个页面的捕捉到顶部的div，我让它工作了，只是在它们捕捉到顶部之后，它们不会取消捕捉并固定到顶部。我使用的是上一个问题的答案，但我无法将其取消

这是一段代码

var h=0；
var notif；
notif2变种；
var-init；
var docked=false；
函数getSize（）{
h=窗内高度；
notif=document.getElementById（“notif”）；
notif2=document.getElementById（“notif2”）；
var fl=document.getElementById（“浮动”）；
init=notif.scrollTop；
notif.style.top=”“+h+“px”；
var h2=h/2；
fl.style.marginTop=“+h2+”px”；
notif.style.height=”“+h+“px”；
var twoh=3*h2；
notif2.style.top=“+h+”px”；
notif2.style.height=“+h+”px”；
}
window.onscroll=函数（）{
if（！docked&&（notif.offsetTop-document.body.scrollTop<0））{
console.log（“在循环中”）；
notif.style.top=0；
notif.style.position='fixed'；
notif2.style.marginTop=“+h+”px”；
停靠=正确；
}else if（docketd&&document.body.scrollTop在设置这些值之前保存使用的值，并在“取消停靠”时重置它们。仅设置“停靠”以显示已取消停靠是不够的。
这段代码是一个如何从您的出发点执行此操作的示例。

下面是我如何保存它并得到类似于你提到的行为的东西

  var h = 0;  
  var notif;  
  var notif2;  
  var init;  
  var docked = false;  
  // holding space for reset values  
  var holdNotifyStyleTop;  
  var holdNotifyOffsetTop;  
  var holdNotif2StyleMarginTop;  

  function getSize() {
    h = window.innerHeight;
    notif = document.getElementById("notif");
    notif2 = document.getElementById("notif2");
    var fl = document.getElementById("floater");
    init = notif.offsetTop;

    notif.style.top = ""+h+"px";

    var h2 = h/2;
    fl.style.marginTop = ""+h2+"px";
    notif.style.height = ""+h+"px";

    var twoh = 3*h2;
    notif2.style.top=""+h+"px";
    notif2.style.height = ""+h+"px";
  }         

  window.onscroll = function () {

        if (!docked && (notif.offsetTop - document.body.scrollTop < 0))             {
            console.log("--- DOCKING ---");
            // save current values
            holdNotifyStyleTop = notif.style.top;
            holdNotifyOffsetTop = notif.offsetTop;
            holdNotif2StyleMarginTop = notif2.style.marginTop;
            notif.style.top = 0;
            notif.style.position = 'fixed'; 
            notif2.style.marginTop=""+h+"px";
            docked = true;

        } else if (docked && document.body.scrollTop <= init) { 
            console.log("--- Un-DOCKING ---");
            notif.style.top = holdNotifyStyleTop;
            notif.style.position = 'relative';
            notif2.style.marginTop=holdNotif2StyleMarginTop;
            notif.offsetTop = holdNotifyOffsetTop;
            docked = false; 
        }
    };

var h=0；
var notif；
notif2变种；
var-init；
var docked=false；
//为重置值保留空间
var-holdtop；
var-offsettop；
var holdNotif2StyleMarginTop；
函数getSize（）{
h=窗内高度；
notif=document.getElementById（“notif”）；
notif2=document.getElementById（“notif2”）；
var fl=document.getElementById（“浮动”）；
init=notif.offsetTop；
notif.style.top=”“+h+“px”；
var h2=h/2；
fl.style.marginTop=“+h2+”px”；
notif.style.height=”“+h+“px”；
var twoh=3*h2；
notif2.style.top=”“+h+“px”；
notif2.style.height=“+h+”px”；
}         
window.onscroll=函数（）{
if（！docked&&（notif.offsetTop-document.body.scrollTop<0））{
console.log（“--DOCKING--”；
//保存当前值
holdNotifyStyleTop=notif.style.top；
holdNotifyOffsetTop=notif.offsetTop；
holdNotif2StyleMarginTop=notif2.style.marginTop；
notif.style.top=0；
notif.style.position='fixed'；
notif2.style.marginTop=“+h+”px”；
停靠=正确；
}否则，如果（docked&&document.body.scrollTop）是我做的，那就是
getSize（）所做的
函数用于设置
notif.style.top=0；
当我尝试解除锁定时，它不会将其更改回以前的状态如果您查看我上面的
jsbin
，您可以看到在尝试解除锁定后它会向下滚动这是我如何保存它的，并得到类似于您提到的行为：好的，这是trick，它从顶部松开，但停靠和松开的div
不会滚动，它会跳到页面底部。有没有办法从顶部滚动？