滾動然後捕捉到頂部不扣緊

我想創建捕捉覆蓋整個頁面的頂部divs，我有它的工作，只是在他們捕捉到頂部後，他們不會解除鎖定並保持固定最佳。我正在使用mu is too short從這個前面的問題scroll then snap to top給出的答案，但我無法將其解鎖。滾動然後捕捉到頂部不扣緊

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

來源

2016-05-17 nviens

保存使用您設置這些之前，當你「取消停靠」重置它們的值。簡單地設置「停靠」來表明你沒有停靠是不夠的。這段代碼是一個例子，說明如何從你的凝視點做到這一點。
以下是我救了它，並獲得像你提到的行爲

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

來源

2016-05-18 13:18:49 Chuck22079

我這樣做，這就是'的getSize（）'函數的是設置什麼'notif.style.top = 0;'和當我嘗試解除鎖定時，它不會將其恢復到之前的樣子 – nviens

如果您查看上面的'jsbin'，您可以看到它在嘗試取消鎖定後滾動下來 – nviens

以下是我如何保存它並得到就像你提到的行爲： – Chuck22079

滾動然後捕捉到頂部不扣緊

回答

相關問題