有一个固定的股利和滚动吗？

Question

伙计们，我解释了我的问题……我正在为移动设备设计菜单（代码非常长），我想使用“粘性标头”

这不是问题，因为使用js，当我滚动页面时，代码添加了此类以固定标头

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

我的标题的height: 90px ，当我单击图标时出现在菜单上，我希望它会出现在标题下（并且菜单必须放入除标题以外的整个div的div中），所以我认为我必须在我的菜单上添加position: fixed和top: 90px否？ 问题在于，它是不可伸缩的之后...

我试图添加

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

但不起作用...真诚地，如果有另一种方法来使用overflow那会更好（因为我讨厌由溢出创建的第二个滚动条）...

我希望您能为我提供帮助，如果没有示例，抱歉。

谢谢

Answer 1

1. 将菜单包装在固定的div中

2. 添加max-height: 100%并overflow: scroll到菜单以启用滚动（就像是iframe）

JSFiddle示例

 #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>