粘边栏与页脚重叠？

Question

I have Created custom sticky sidebar for ADS, it works but there is an issue. when I scroll it to the bottom, it overlaps on the footer. pls check. - 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> 

Check for site url is - http://www.test2.guru99.com/java-tutorial.html

Please Help Me !

Answer 1

Modify your following CSS

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

To this, Add position:relative and 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;
}