击中页脚时侧栏停止

Question

我在这里尝试了很多建议，但似乎都没有。
我试图阻止侧边栏“div class="fixed-col-left fixed-left" 在小屏幕上越过页脚。

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

position: fixed 导致重叠，在脚本中将position 属性设置为absolute 将导致重叠停止发生。