javascript - 有一个 div 固定并滚动它吗？

Question

伙计们，我解释一下我的问题...... 我正在为移动设备开发菜单(代码非常长)，我想使用“粘性标题”

这不是问题，因为使用 js，当我滚动页面时，代码添加了这个类来修复标题

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

我的标题有 height: 90px 并且当我点击图标时出现菜单，我希望它会出现在标题下面(并且菜单必须进入一个覆盖整个页面的 div，除了标题)，所以我认为我必须在我的菜单上添加 position: fixed 和 top: 90px 不是吗？问题是在它不可滚动之后...

我试着添加

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

但是没用... 真诚地，如果有另一种方法而不是使用 overflow 会更好(因为我讨厌 overflow 创建的第二个滚动条)...

我希望你能帮助我，如果我没有例子，我很抱歉......

谢谢

Answer 1

1. 将菜单包裹在一个固定的 div 中

2. 将 max-height: 100% 和 overflow: scroll 添加到菜单以启用滚动(就像它是一个 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>