Я создаю страницу, используя angular-material, и я хочу добавить кнопку чата в нижнем правом углу экрана, и эта кнопка должна прокручиваться, когда я прокручиваю страницу вниз, как этот сайт: http://harleytherapy.com/
Я сделал большую часть части, т.е. кнопка находится в правом нижнем углу, и она также прокручивается вместе со страницей, когда я начинаю прокручивать страницу, но единственная проблема заключается в том, что когда я достигаю дна, та кнопка идет за нижним колонтитулом и становится невидимой. Я хочу, чтобы оно оставалось выше нижнего колонтитула, когда я достигну дна. Вот мой код:
<div class="main-content-container">
<button mat-fab class="chat-icon-btn">
<mat-icon class="chat-icon">chat_bubble_outline</mat-icon>
</button>
<h1>Dashboard <mat-icon aria-label="false">dashboard</mat-icon>
</h1>
<!-- Some more content -->
<footer class="footer">
<span>
<a href="#" class="footer-links">Hjem</a><span class="vertical-divider"></span>
<a href="#" class="footer-links">Om </a> <span class="vertical-divider"></span>
<a href="#" class="footer-links"> Hjælp </a> <span class="vertical-divider"></span>
<a href="#" class="footer-links"> Kontakt os </a> <span class="vertical-divider"></span>
<a href="#" class="footer-links"> Webstedsbetingelser </a> <span class="vertical-divider"></span>
<a href="#" class="footer-links"> Fortrolighedspolitik</a>
</span>
</footer>
</div>
CSS:
.main-content-container {
margin-left: 10%;
}
.chat-icon-btn {
position: fixed;
right: 0;
bottom: 0;
background: #3900B3;
color: #fff;
font-size: 25px;
margin-right: 25px;
margin-bottom: 5px;
}
.chat-icon {
margin-right: 0px !important;
}
.footer {
background-color: #3900B3;
padding: 50px 0 50px 0;
position: relative;
text-align: center;
margin-top: 100px;
}
.footer-links {
color: #fff;
text-decoration: navajowhite;
font-size: 18px;
}
Заранее спасибо.