Липкая боковая панель перекрывает нижний колонтитул?

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; 
}