html - 正文溢出时我无法滚动：隐藏和固定元素

Question

我想隐藏我的滚动条，所以我给了我网站的主体overflow:hidden;
现在我想让我的菜单栏固定在我的页面顶部，position: fixed;

但是，当我将菜单栏设置为固定时，我无法再用滚轮滚动整个页面。
谁知道答案？

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

这是有效的，但是当我position: fixed;在我的菜单上放一个时，我不能再滚动了。

.menu {
    position: fixed;
    width: 100%;
    height: 50px;
}

我希望你能理解我的问题。

Answer 1

您可以使用 jquery.mousewheel.js 插件来完成此操作。

这是使用此插件的页面演示：http: //jsfiddle.net/BQeWx/

Javascript：

$('html,body').bind('mousewheel',function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta * 1));
});

CSS：

body, html { overflow: hidden; }

.body_wrapper {
    overflow: hidden;
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%; 
}

.wrapper {
    width: 100%;
    margin: 48px auto 0 auto;
    z-index: 10;
}

我不得不对评论中提到的 CSS 进行一些修改。

如果这是预期的用户体验，您应该考虑添加一个固定的“返回顶部”链接，该链接显示在每个部分的侧面或底部。

插件文档：https ://github.com/brandonaaron/jquery-mousewheel

希望这会有所帮助，干杯。