关闭画布导航滚动问题

Posted 2023-05-08

【中文标题】关闭画布导航滚动问题

【英文标题】：Off canvas navigation scroling problems

【发布时间】：2015-08-03 18:49:20

【问题描述】：

我做了这个画布导航，一切正常，除了导航关闭时它一直到顶部，我希望它保持在打开的位置。当它打开时，它给 body 一个滚动位置的边距，关闭后它给出margin: 0。帮助任何人。这是使它更清晰的小提琴：http://jsfiddle.net/eyd7n9tk/

编辑

关键是滚动应该被禁用但在导航打开时可见。执行以下步骤：

在网站的任何位置打开导航 导航打开，页面停留在同一位置，不跳转到任何地方 打开导航时禁用滚动 关闭导航，启用滚动，页面还在原地，不跳转。

【参考方案1】：

删除线

var scrl = $(this).scrollTop();

你会留在打开的地方

【讨论】：

他还应该注释掉第 7 行：$('body').scrollTop(scrl).css('margin-top', '0');

评论后此行将无法滚动到顶部

是的，这可以解决问题，但它可以实现滚动，这是我不想要的。

@OlegYudovich，他仍然可以手动滚动。他不需要那条线

按照步骤： 1.删除这一行 2.向下滚动 3.toggle nav 4.close nav 5.尝试手动向上滚动。看看会发生什么

【参考方案2】：

如果有人需要，我想通了，只需要几个变量来存储滚动位置和嵌套对象。这是最后的小提琴：http://jsfiddle.net/eyd7n9tk/3/

var navigation = ;

function toggleNav() 
    navigation.scrl = $('body').scrollTop();
    if ($('#inner-wrap').hasClass('opened')) 
        $('#inner-wrap').removeClass('opened');
        $('#close-nav').hide();
        $('body').removeClass('no-scroll');
        $('body').css('top', '0').scrollTop(here);
     else 
        $('#nav').show();
        $('#inner-wrap').addClass('opened');
        $('#close-nav').show();
        $('body').css('top', - navigation.scrl + 'px').addClass('no-scroll');
    


function openNav() 
    $('#nav').show();
    $('#inner-wrap').addClass('opened');
    $('#close-nav').show();
    $('body').css('top', - navigation.scrl + 'px').addClass('no-scroll');
    alert(navigation.scrl);


function closeNav() 
    $('#inner-wrap').removeClass('opened');
    $('#close-nav').hide();
    $('body').removeClass('no-scroll');
    $('body').css('top', '0').scrollTop(navigation.scrl);
    alert(navigation.scrl);


$('#toggle-nav').click(function () 
    toggleNav();
);

$("#close-nav").click(function()
    closeNav();
);