0
我正在開發一個有固定頁腳,固定導航欄和固定側欄的網站。 正如我scroll > 70
側欄變得固定。固定側邊欄在到達頁腳時應該有邊距
但我到了固定的側邊欄重疊的頁腳區域也被固定在頁面的底部,
我擔心的是我想實現一個jQuery代碼,以便爲我到達頁腳側邊欄不應該重疊頁腳區域,並將動態獲得邊距,因此它不應與頁腳區域重疊。
HTML代碼網站
<section class="footer" id="footer">
<div class="container">
<!-- row of columns -->
<div class="row">
<div class="col-lg-12">
<footer class="footer-inner">
<div class="footer-centered">
<nav class="footer-menu">
<a href="#">About</a>
<a href="#">Jobs</a>
<a href="#">Partnerships</a>
<a href="#">Contact</a>
<a href="#">Terms of service</a>
<a href="#">Privacy policy</a>
</nav>
<h6 class="developer-wish">Made with ♥ in BARCELONA</h6>
<span class="copyright">Legal Notices<br>© CircoViral.com, LLC. Trademarks belong to their respective owners. All rights reserved.</span>
</div>
</footer>
</div>
</div>
</div> <!-- /container -->
</section>
CSS頁腳
.footer {
border-top: 1px solid #efefef;
color: #7c858c;
font-size: 1.2rem;
text-align: center;
background-color: #fff;
position: relative;
left: 0;
right: 0;
bottom: 0;
height: 370px;
margin: -350px auto 0;
}
.footer:before {
background-color: #e8e7e7;
border-bottom-color: #ebeaea;
border-top-color: #dfdede;
top: 0;
}
.footer:after {
background: -moz-linear-gradient(left center, #fc4568 0%, #fc4568 25%, #87df72 25%, #87df72 50%, #7c858c 50%, #7c858c 75%, #ffa215 75%, #ffa215 100%) repeat scroll center top/100% auto transparent;
bottom: 0;
content: "";
display: block;
height: 9px;
left: 0;
position: absolute;
right: 0;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.footer .footer-inner {
height: 361px;
bottom: 9px;
left: 0;
position: fixed;
right: 0;
}
.footer .footer-centered {
padding: 0 7px;
margin: 0 auto;
max-width: 1002px;
min-width: 320px;
}
@media (max-width: 991px) {
.footer .footer-centered {
max-width: 800px;
}
}
.footer .footer-menu {
padding: 122px 0 0;
}
.footer .footer-menu a {
display: inline-block;
font-size: 1.8rem;
margin: 0 3.1%;
}
.footer .developer-wish {
display: inline-block;
left: 0;
position: absolute;
right: 0;
font-size: 1.8rem;
bottom: 81px;
}
.footer .copyright {
display: inline-block;
left: 0;
position: absolute;
right: 0;
bottom: 14px;
line-height: 2;
}
我不能粘貼在這裏,整個代碼, 您可以查詢網站的完整代碼開發服務器 鏈接到開發網站:CircoViral