Question

我正在建立一个响应式网站，移动设备可以通过菜单按钮查看菜单。按下此按钮可以滚动，因此我使用res = 96和overflow: hidden;修正了

由于某种原因，网站＆＃34;跳跃＆＃34;在右边，我无法向后滚动。这是源代码：

position: fixed;

和Javascript：

    <body>
        <div id="header">
            <div id="logo">
                <a href=""><img src="images/logo.png" alt="logo"/></a>
            </div>
                <div class="menuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            <div id="nav">
                <div class="aanmelden">
                    <a href="">Aanmelden</a>
                </div>
                    <ul>
                        <li><a href="">Download app</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">Over GYM2Go</a></li>
                    </ul>
                </div>  
            </div>
    </body>

CSS：

$(window).ready(function() {
    menuToggle();
});

var down = false;

function menuToggle() {
    var i = 0;
    $('.menuToggle').on('click', function(){
        $('.menuToggle').toggleClass('active');
        $('#nav').toggleClass('active');
        $('body').toggleClass('active');

        if (down) {
            $('.lastItem').remove();
            down = false;
        } else {
            $("ul").append('<li class="lastItem"><a href="">Aanmelden</a></li>');
            down = true;
        }
    });

    $('#nav > ul > li').on('click', function(e) {
        $('#nav > ul > li.active').removeClass('active');
        $(this).addClass('active');
        var childUl = $(this).find('ul');
        $('#nav > ul > li > ul').each(function() {
            if (!childUl.is($(this))) {
                $(this).hide();
            }
        });
        if (childUl.length > 0 && childUl.css('display') == 'none') {
            e.preventDefault();
            childUl.toggle();
        }
    });
};

Answer 1

所以经过一番乱搞后我发现这是解决我问题的方法。

body.active {
    overflow: hidden;
    position: fixed;
    top:0;
    left:0;
}

这可能是因为position: fixed;实际上需要一个固定的位置。

Html位置修复了错误屏幕到右边

1 个答案: