滚动然后捕捉到顶部而不是取消捕捉答案

【问题标题】：Scroll then snap to top not unsnapping滚动然后捕捉到顶部而不是取消捕捉
【发布时间】：2016-09-13 22:48:58
【问题描述】：

我正在尝试创建覆盖整个页面的对齐到顶部的 div，并且我可以让它工作，只是在它们对齐到顶部后，它们不会取消对齐并保持固定在顶部。我正在使用上一个问题scroll then snap to top 中mu is too short 给出的答案，但我无法将其解开。

这是代码的jsbin。

    var h = 0;
    var notif;
    var notif2;
    var init;
    var docked = false;

    function getSize() {
      h = window.innerHeight;
      notif = document.getElementById("notif");
      notif2 = document.getElementById("notif2");
      var fl = document.getElementById("floater");
      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 = function() {

      if (!docked && (notif.offsetTop - document.body.scrollTop < 0)) {
        console.log("in loop");
        notif.style.top = 0;
        notif.style.position = 'fixed';
        notif2.style.marginTop = "" + h + "px";
        docked = true;
      } else if (docked && document.body.scrollTop <= init) {
        notif.style.position = 'block';
        while (notif.style.top <= h) {
          var ab = Math.abs(notif.offsetTop)
          var ab2 = Math.abs(document.body.scrollTop);
          notif.style.top = init + 'px';
        }
        if (notif.style.top == h || notif.style.top == h - 1) {
          docked = false;
        }
      }
    };

<body onload="getSize()">
  <div class="contain">
    <div id="floater">
      <h1 class="white">Hello, World</h1>
      <a href="#">Link 1</a>&ensp;<a href="#">Link 2</a>
    </div>
  </div>

  <div class="announcements" id="notif">
    Please cover the previous text on the page. If this works i will be really excited.
  </div>

  <div class="announcements2" id="notif2">
    Cover the white page.
  </div>
</body>

【问题讨论】：

标签： javascript html jquery css dom-events

【解决方案1】：

在设置之前保存使用的值，并在“取消停靠”时重置它们。简单地设置“停靠”来表明你没有停靠是不够的。此代码是一个示例，说明如何从您的角度出发。
这是我保存它并得到类似你提到的行为的方法

  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; 
        }
    };

【讨论】：

我愿意，这就是getSize() 函数的作用是设置notif.style.top = 0;，当我尝试取消停靠时，它并没有将它改回我之前的方式
如果您查看上面的jsbin，您会看到它在尝试取消停靠后向下滚动
以下是我保存它并得到类似您提到的行为的方法：
好吧，成功了，它从顶部取消停靠，但停靠和取消停靠的div 不会滚动，而是跳到页面底部。有没有办法从顶部滚动出去？