Question

我在这里尝试过很多建议，但似乎没有任何建议我试图阻止一个侧栏＆＃34; div class =＆＃34; fixed-col-left fixed-left＆＃34;在小屏幕上翻阅页脚。

<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将导致重叠停止发生。

打击页脚时，侧栏停止

1 个答案: