javascript - 粘性侧边栏与页脚重叠？

Question

我已经为 ADS 创建了自定义的粘性侧边栏，它可以工作，但是有一个问题。当我将它滚动到底部时，它会重叠在页脚上。请检查。 - http://screencast.com/t/oEjcrbocB05C

var stickySidebar = $('.sticky');

if (stickySidebar.length > 0) { 
  var stickyHeight = stickySidebar.height(),
      sidebarTop = stickySidebar.offset().top;
}

// on scroll move the sidebar
$(window).scroll(function () {
  if (stickySidebar.length > 0) { 
    var scrollTop = $(window).scrollTop();
            
    if (sidebarTop < scrollTop) {
      stickySidebar.css('top', scrollTop - sidebarTop);

      // stop the sticky sidebar at the footer to avoid overlapping
      var sidebarBottom = stickySidebar.offset().top + stickyHeight,
          stickyStop = $('.main-content').offset().top + $('.main-content').height();
      if (stickyStop < sidebarBottom) {
        var stopPosition = $('.main-content').height() - stickyHeight;
        stickySidebar.css('top', stopPosition);
      }
    }
    else {
      stickySidebar.css('top', '0');
    } 
  }
});

$(window).resize(function () {
  if (stickySidebar.length > 0) { 
    stickyHeight = stickySidebar.height();
  }
});

.sticky {
  position: relative;
  top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

检查站点 URL 是 - http://www.test2.guru99.com/java-tutorial.html

请帮帮我!

Answer 1

修改你下面的CSS

#rt-footer-surround {
  background-color: #3f3f3f;
  color: #f8f8f8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

为此，添加 position:relative 和 z-index:1

#rt-footer-surround {
  background-color: #3f3f3f;
  color: #f8f8f8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}