打開offcanvas菜單時保留位置Y

我有一個offcanvas菜單和一個包含內容的容器。當我向下滾動網站並打開並關閉菜單時，我正努力將滾動的位置保持在我所處的位置。現在當關閉菜單時，它會滾動回到網站的頂部。這是由我的一些CSS給我的容器造成的，以防止滾動我猜。打開offcanvas菜單時保留位置Y

當我console.log offsetY然後它顯示時關閉菜單0作爲抵消。那麼我做錯了什麼？

所以我有什麼是這樣的：

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'); 

     });

任何幫助極大的讚賞。

來源

2017-06-19 Meules

我覺得比較容易做一個類，例如.no-scroll，並使overflow-y屬性hidden。這將保持內容不被滾動任何方向，當你關閉菜單時，你可以刪除該類。另外，通過這樣做，它應該保持當前的滾動位置。

來源

2017-06-19 15:45:30 SidTheBeard

是的，嘗試之前設置不滾動到HTML和身體標記。然而，使用'overflow：hidden'而不是'overflow-y：hidden'。改變這一點確實有效。 Thx – Meules

@Meules Np，很高興我能幫到你。 – SidTheBeard

打開offcanvas菜單時保留位置Y

回答

相關問題