Überlappung der Seitenleiste

Question

Beim horizontalen Bildlauf überlappt die Seitenleiste die andere Spalte. Ich verwende jQuery + CSS, um dies zu erreichen. Wie kann ich diese Überschneidung verhindern?

Bevor Benutzer erreicht div Container: http://prnt.sc/b9j4t6

Wenn Benutzer div Container erreicht (wie es sollte immer aussehen): http://prntscr.com/b9j7mz

Overlap Ausgabe: http://prnt.sc/b9j56m

Code:

  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

Der Grund dafür, dass der linke Container den rechten Container überlappt, liegt darin, dass Sie ihn auf fixed setzen. Dadurch wird das Element aus dem normalen Seitenfluss entfernt.

Wenn Sie nicht wollen, es Sie entweder passieren können Ihre CSS eine Medienabfrage zu sagen, wenn Ihre Seite ist kleiner eingerichtet innerhalb als x position: static;

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

oder in Ihrem Javascript

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

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