当身体溢出时我无法滚动:隐藏和固定元素

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

希望这有帮助，干杯。