Question

我尝试创建覆盖整个页面的顶部div，然后让它工作，只是在他们捕捉到顶部后他们不会被解除并保持固定顶端。我使用上一个问题mu is too short中scroll then snap to top给出的答案，但我无法解除它。

这里是jsbin代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在设置这些值之前保存使用的值，并在“解除对接”时重置它们。只需设置＆＃34;停靠＆＃34;表明你没有停靠是不够的。此代码是如何从您的凝视点开始执行此操作的示例这是我如何保存它并得到类似你提到的行为

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

然后滚动到顶部而不是取消绑定

1 个答案: