Боковая панель останавливается при достижении нижнего колонтитула

Question

Я пробовал много предложений здесь, но ни один из них не работает.
Я пытаюсь остановить боковую панель «DIV класс =» фиксированные цв левых фиксированный влево»от перехода в сноску на маленьких экранах.

<section class="contain-main"> 
<div class="center-div inner-col-2"> 
<div class="fixed-col-main"> 
<div class="fixed-col-left fixed-left"></div> 
<div class="fixed-col-right"></div> 
</div> 
</div> 
</section> 
<footer class="footer-main"></footer> 

До сих пор я пришел к этому результату JS но это еще не похоже на работу

<script type="text/javascript"> 
    $(function() { 
     $.fn.scrollBottom = function() { 
      return $(document).height() - this.scrollTop() - this.height(); 
     }; 

     var $el = $('#fixed-col-left>div'); 
     var $window = $(window); 

     $window.bind("scroll resize", function() { 
      var gap = $window.height() - $el.height() - 10; 
      var visibleFoot = 400 - $window.scrollBottom(); 
      var scrollTop = $window.scrollTop() 

      if(scrollTop < 400 + 10){ 
       $el.css({ 
        top: (400 - scrollTop) + "px", 
        bottom: "auto" 
       }); 
      }else if (visibleFoot > gap) { 
       $el.css({ 
        top: "auto", 
        bottom: visibleFoot + "px" 
       }); 
      } else { 
       $el.css({ 
        top: 0, 
        bottom: "auto" 
       }); 
      } 
     }); 
    }); 
    </script> 

Видео демо показывает, что происходит http://sendvid.com/vfbv7pvd

Answer 1

проблема заключается в определении CSS, который говорит:..

.fixed-col-left.fixed-left { 
    position: fixed; 
    top: 113px; 
    } 

The position: fixed вызывает его перекрывать, и установив атрибут position в absolute в скрипте вызовет перекрытие, чтобы остановить происходящее.