CODEWITHSUNDEEP
htmlcssoverflowhiddenfixed
Dennis
Dennis

Reputation: 102

I can't scroll when body overflow: hidden and an fixed element

I want to hide my scrollbar, so i gave the body of my site overflow:hidden;
Now I want to have my menubar fixed on the top of my page, with position: fixed;

But when I put my menubar on fixed I can't scroll my whole page anymore with my scrollwheel.
Who knows an answer?

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

This is working, but when i put a position: fixed; on my menu, i can't scroll anymore.

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

I hope you understand my question.

Upvotes: 6

Views: 5541

Answers (2)

juan
juan

Reputation: 1

I have the same problem if you put the menu fixed any other element can not be fixed just the unique who is put on the top from siblings and beneath. I can resolve this issue with html structure.

<body>
<nav class="menu"></nav>
<section></section>
<section>/<section>
....
<body>

Upvotes: 0

Mat Bloom
Mat Bloom

Reputation: 140

You can accomplish this using jquery.mousewheel.js plugin.

Here is a demo of your page using this plugin: 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;
}

I've had to make a few modifications to your CSS which are noted in the comments.

If this is the intended user experience, you should consider adding a fixed 'return to top' link that appears off to the side or bottom of each section.

Documentation for plugin: https://github.com/brandonaaron/jquery-mousewheel

Hope this helps, cheers.

Upvotes: 1

Related Questions