邊欄重疊列

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媒體查詢說，如果你的網頁是不是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"}); 
}