Question

横向滚动时，侧边栏与另一列重叠。我正在使用jQuery + CSS来实现这一目标。如何防止这种重叠？

在用户到达div容器之前： http://prnt.sc/b9j4t6

当用户到达div容器时（它应该如何看待）： http://prntscr.com/b9j7mz

代码：

            var element = $('.price-container');
            var baseTop = element.offset().top;

            $(window).scroll(function () {

                var top = $(this).scrollTop();

                if (top >= baseTop)
                    element.css({"position": "fixed", "top": "10px"});
                else
                    element.css({"position": "", "top": ""});
            });

Answer 1

左侧容器与右侧容器重叠的原因是您将其设置为fixed。这会使元素脱离页面的正常流程。

如果您不希望这种情况发生，您可以在css中设置媒体查询，说明您的网页是否小于x position: static;

// change max-width: 480px to suit your screen size
@media screen and (max-width: 480px) {
  .price-container { position: static !important; }
}

或者在你的javascript中

var top = $(this).scrollTop(),
    width = $(window).width();

if (top >= baseTop && width >= [the point you want to break] ) {
  element.css({"position": "fixed", "top": "10px"});
}

边栏重叠列

1 个答案: