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>

检查网站网址是否为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;
}

粘性侧边栏与页脚重叠？

1 个答案: