Question

我有一个offcanvas菜单和一个包含内容的容器。当我向下滚动网站并打开并关闭菜单时，我试着将滚动位置保持在我所处的位置。现在关闭菜单时，它会滚动回到网站顶部。这是由我给容器的一些CSS样式引起的，以防止滚动我猜。

当我在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');

        });

任何帮助非常感谢。

Answer 1

我发现创建类更容易，例如.no-scroll，并生成overflow-y属性hidden。这将使内容无法向任何方向滚动，当您关闭菜单时，您可以删除该类。此外，通过这样做，它应该保持您当前的滚动位置。

打开扫描菜单时保持位置Y.

1 个答案: