Scrollen, dann nach oben schnappen, nicht aufheben

Ich versuche Snap zu Top Divs zu erstellen, die die gesamte Seite abdecken, und ich habe es funktioniert, es ist nur, dass sie nach dem Snap an der Spitze nicht aufschnappen und fixiert bleiben oben. Ich benutze die Antwort von mu is too short von dieser vorherigen Frage scroll then snap to top, aber ich kann es nicht zum Auflösen bekommen.Scrollen, dann nach oben schnappen, nicht aufheben

Hier ist ein jsbin des Codes.

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>

Quelle

2016-05-17 nviens

Speichern Sie die Werte verwendet, bevor Sie diese gesetzt und zurückgesetzt sie, wenn Sie "un-Dock". Wenn Sie einfach "angedockt" einstellen, um anzuzeigen, dass Sie nicht angedockt sind, reicht das nicht aus. Dieser Code ist ein Beispiel dafür, wie Sie das von Ihrem Ausgangspunkt aus tun können.
Hier ist, wie ich es gerettet und bekam so etwas wie das Verhalten, das Sie

erwähnen

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

Quelle

2016-05-18 13:18:49 Chuck22079

ich tun, das ist, was die 'getSize()' Funktion ist die 'notif.style.top = 0 zu setzen;' und wenn ich versuche, es abzudocken, ändert es es nicht zu dem Weg, den ich es vor hatte – nviens

Wenn Sie das 'jsbin' heraus überprüfen, das ich oben habe, können Sie sehen, dass es unten scrollt, nachdem es versucht, abzudocken – nviens

Ist hier, wie ich es speicherte und bekam etwas wie das Verhalten, das du erwähnst: – Chuck22079

Scrollen, dann nach oben schnappen, nicht aufheben

Antwort

Verwandte Themen