Have a div fixed and scroll it?

Question

Guys I explain my problem ... I'm working on a menu for the mobile (the code is extremely long) and I want to use the "sticky header"

That isn't a problem because with js, when i scroll the page the code added this class to fixed the header

.fixed {
 position: fixed;
 top: 0;
 z-index: 999;
}

My header has height: 90px and when i click on icon appear the menu, i want that it will appear under the header (and the menu must be into a div that covers entire page except the header), so i think that i must to add position: fixed and top: 90px on my menu no ? The problem is that after it isn't scollable...

i'm tried to add

overflow-y: scroll;
overflow-x: hidden;

but doesn't work... sincerely if there was another way instead to use overflow it would be better (because i hate the second scroll-bar created by overflow)...

i hope that you can help me and sorry if i don't have an example...

thanks

If you create a demo in jsfiddle.net someone might be able to help you out. — rrk, Jan 27 '16 at 18:59
Do you have some HTML that goes with this? Maybe an example were we can see whats happening? — Adam Konieska, Jan 27 '16 at 18:59
you'll probably have to wrap a menu div inside a fixed div, then users can scroll the inner div (menu) — Aziz, Jan 27 '16 at 19:00
Is there a reason you're creating your navigation from scratch? There are a lot of very good frameworks out there that have done all this for you... — OliverJ90, Jan 27 '16 at 19:04
@Aziz maybe is a good idea, but do you say that i must add also overflow-y: scroll to fixed div ? — Borja, Jan 27 '16 at 19:44

Aziz · Accepted Answer · 2016-01-27T22:17:27.080

Wrap the menu inside a fixed div
Add max-height: 100% and overflow: scroll to the menu to enable scrolling (as if it was an iframe)

JSFiddle Example

#fixedWrapper {
  background:yellow;
  position:fixed;
  height: 50%;
  width:100%;
  /*centering*/
  left:0;
  right:0;
  margin:0 auto;
}

ul {
  margin:0;
  padding: 0;
  list-style:none;
  max-height:100%;
  overflow: scroll;
}

li a {
  display:block;
  padding:2em;
  background:black;
  color:#FFF;
  text-decoration: none;
  margin:2em;
  transition:.3s;
}

li a:hover {
  background:#FFF;
  color:#000;
}

p {
  background:#EEE;
  padding:2em;
}

<div id="fixedWrapper">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
    <li><a href="#">Link 8</a></li>
    <li><a href="#">Link 9</a></li>
    <li><a href="#">Link 10</a></li>
  </ul>
</div>

<!-- sample page content -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

two problems: 1) if i add to #fixedWrapper "top: 90px" a part of my menu is hidden (finisch the scroll). 2) is possible to hidden the "scroll-bar" of overflow ? — Borja, Jan 27 '16 at 22:15
You might need to add padding or margin to the menu div to fix your issue. As for hiding the scrollbar, keep in mind that in mobile devices the scrollbar is different but if you really want to hide it have a look here: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Aziz, Jan 27 '16 at 22:23
nothing doesn't work...i'm sure that is my problem and so i accept your answer (and thank you for the help), but maybe this isn't the better solution to have a mobile menu :/ thanks — Borja, Jan 27 '16 at 22:37
see https://jsfiddle.net/skn4t3mk/ click on grey rect to open menu. The menu (tag nav) has "top: 90px" because in my case there is a sticky header that have 90px height... i tried to put the menu inside another div (with overflow and max-height how your example, but a bart at bottom of menu is hidden).. — Borja, Jan 27 '16 at 22:50
see the update https://jsfiddle.net/skn4t3mk/ (how can you see, the overflow there's but the item "10" is hidden (because it has top: 90px) — Borja, Jan 27 '16 at 22:55

Have a div fixed and scroll it?

1 Answers1