Behalten Sie Position Y beim Öffnen offcanvas Menü

Question

Ich habe ein Offcanvas-Menü und einen Container mit Inhalt. Wenn ich die Webseite herunterscrolle und das Menü öffne und schließe, versuche ich, die Scroll-Position genau auf der Position zu halten, an der ich war. Gerade jetzt, wenn das Menü geschlossen wird, scrollt es zurück zum Anfang der Seite. Das wird durch ein CSS-Styling verursacht, das ich dem Container gegeben habe, um Scrollen zu verhindern.

Wenn ich console.log offsetY dann zeigt es beim Schließen des Menüs 0 als Offset. Also was mache ich falsch?

Also, was ich habe, ist dies:

mainHeader.on('click', '.nav-trigger', function(event){ 
       // open primary navigation on mobile 
       event.preventDefault(); 

       mainHeader.addClass('nav-open'); 
       $('.push-content, .offcanvas').addClass('nav-open'); 
       var offsetY = window.pageYOffset, 
       $win = $(window), 
       $body = $('.container-fluid') ; // the content container 
      // Block scrolling 
       $body.css({ 
        'position': 'fixed', 
        'top': -offsetY + 'px' 
       }); 
       $win.scrollTop(offsetY); 
      }); 

     $('.mobile-trigger').on('click', function(){ // btn to close menu again 
       var offsetY = window.pageYOffset, 
       $win = $(window), 
       $body = $('.container-fluid') ; 
       $body.css({ 
       'position': 'relative', 
       'top': -offsetY + 'px' 
       }); 
       mainHeader.removeClass('nav-open'); 
       $('.push-content, .offcanvas').removeClass('nav-open'); 

     }); 

Jede Hilfe sehr geschätzt.

Answer 1

Ich finde es einfacher, eine Klasse zu machen, zum Beispiel .no-scroll, und machen Sie die Überlauf-y-Eigenschaft hidden. Dadurch wird verhindert, dass der Inhalt in beide Richtungen gescrollt wird. Wenn Sie das Menü schließen, können Sie die Klasse einfach entfernen. Außerdem sollte es Ihre aktuelle Bildlaufposition beibehalten.