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
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)
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.