我正在尝试使用$(".menu__link").click(function () {
$("#menu__main").toggleClass("active");
$("#menu__overlay").toggleClass("active");
$(".menu__close").toggleClass("active");
});
固定杆始终将DIV设置在底部。我也尝试过“绝对”定位,但这不起作用。您能帮忙吗?
.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;
}
#menu__main {
position: fixed;
top: 0;
bottom: 0;
width: 300px;
left: -315px;
height: 100%;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.30s ease;
-moz-transition: 0.30s ease;
-o-transition: 0.30s ease;
transition: 0.30s ease;
z-index: 999999;
}
#menu__main.active {
-webkit-transform: translate(260px, 0px);
-moz-transform: translate(260px, 0px);
-o-transform: translate(260px, 0px);
-ms-transform: translate(260px, 0px);
transform: translate(260px, 0px);
}
.menu__close {
width: 100%;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.30s ease;
-moz-transition: 0.30s ease;
-o-transition: 0.30s ease;
transition: 0.30s ease;
}
.menu__close.active {
-webkit-transform: translate(260px, 0px);
-moz-transform: translate(260px, 0px);
-o-transform: translate(260px, 0px);
-ms-transform: translate(260px, 0px);
transform: translate(260px, 0px);
position: fixed;
z-index: 2;
height: 100%;
}
.menu__close.active .menu__link {
width: 100%;
height: 100%;
display: block;
}
.menu__close.active .menu__link img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu__close">
<a class="menu__link" href="#menu__main">
MENU
</a>
</div>
<nav id="menu__main" class="menu__overlay">
<div class="menu__overlay--main">
<div class="menu__overlay--content">
<p>Scrollable Menu.</p>
<p>Whatever contents are here.</p>
<p>Whatever contents are here.</p>
<p>Scrollable Menu.</p>
<p>Scrollable Menu.</p>
<p>Scrollable Menu.</p>
<p>Scrollable Menu.</p>
<p>Scrollable Menu.</p>
<p>Scrollable Menu.</p>
</div>
<div class="menu__overlay--bottom">
Stick to bottom always
</div>
</div>
</nav>
self.tableView.register(MyCustomCell.self, forCellReuseIdentifier: cellReuseIdentifier)
答案 0 :(得分:0)
.menu__overlay--bottom {
background-color: #f1f6ff;
padding: 20px 0 20px 100px;
height: 50px; /* Set a height for your bottom element */
bottom: 0;
width: 100%;
}
.menu__overlay--content {
width: 100%;
padding: 20px 0 20px 100px;
margin-bottom: 50px;
min-height: calc(100vh - 50px);
/* Using calc deduct the height of your bottom content this way you can achive
100% full height of your content */
}
我希望这有助于解决您的问题。
答案 1 :(得分:0)
我已通过以下操作解决了该问题:
.menu__overlay--content {
width: 100%;
padding: 20px 0 20px 50px;
margin-bottom: 50px;
overflow-y: scroll;
}
#menu__main {
overflow-y: hidden;
}