菜单中的粘性DIV

Question

我试图将DIVclass="menu__overlay--bottom"始终保持在底部。我也尝试过“绝对”定位，但这不起作用。您能帮忙吗？$(".menu__link").click(function () {      $("#menu__main").toggleClass("active");      $("#menu__overlay").toggleClass("active");      $(".menu__close").toggleClass("active");});.menu__overlay {  height: 100%;  width: 0;  position: fixed;  z-index: 1;  top: 0;  left: 0;  overflow-x: hidden;  transition: 0.5s;  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5);  background-color: #ffffff;}.menu__overlay--main {  position: relative;}.menu__overlay--content {  width: 100%;  padding: 20px 0 20px 100px;  margin-bottom: 50px;}.menu__overlay--content h2 {  font-size: 18px;  font-weight: 600;  color: #455cbc;  margin: 0;}.menu__overlay--content h3 {  font-size: 18px;  color: #858585;}.menu__overlay--content h3 span {  color: #9b9b9b;  margin-left: 20px;}.menu__overlay a {  color: #4a4a4a;  display: block;  transition: 0.3s;}.menu__overlay a:hover, .menu__overlay a:focus {  color: #f1f1f1;}.menu__overlay--list {  list-style: none;  padding-left: 15px;}.menu__overlay--list li {  padding: 7px 0;}.menu__overlay--list li span {  color: #9b9b9b;  margin-left: 20px;}.menu__overlay--bottom {  background-color: #f1f6ff;  padding: 20px 0 20px 100px;  position: fixed;  bottom: 0;  width: 100%;}.menu__overlay--name {  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21);  background-image: linear-gradient(327deg, #445bbc, #3274bb);  color: #fff;  font-size: 10px;  color: #fff;  font-size: 10px;  border-radius: 50%;  width: 20px;  height: 20px;  display: inline-block;  padding: 2px 6px;  vertical-align: bottom;  margin-right: 5px;}.menu__overlay--bg.active {  height: 100%;  width: 100%;  position: fixed;  background-color: rgba(0, 0, 0, 0.53);  z-index: 1;}

Answer 1

我已经通过执行以下操作解决了该问题：

.menu__overlay--content {

  width: 100%;

  padding: 20px 0 20px 50px;

  margin-bottom: 50px;

  overflow-y: scroll;

}

#menu__main {

  overflow-y: hidden;

}