Боковые панели перекрытий Столбец

Question

При прокрутке по горизонтали боковая панель перекрывает другую колонку. Для этого я использую jQuery + CSS. Как я могу предотвратить это перекрытие?

Перед пользователем достигает Div контейнера: http://prnt.sc/b9j4t6

Когда пользователь достигает Div контейнера (как он всегда должен выглядеть): http://prntscr.com/b9j7mz

Перекрытие Редакция: http://prnt.sc/b9j56m

Код:

  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 медиа-запрос, чтобы сказать, если Ваша страница меньше, чем х 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"}); 
}