Question

我正在开发一个具有固定页脚，固定导航栏和固定侧边栏的网站。随着我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>&copy; 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

Answer 1

我认为有人已经这样做了。看看这个： http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

然后使用以下代码修改它：

$('.my-sticky-element').waypoint('sticky', {
  offset: 30 // Apply "stuck" when element 30px from top
});

固定侧边栏在到达页脚时应获得边距

1 个答案: