Ich habe die folgende Webseite;CSS-Position Fixed funktioniert nicht in Chrome
http://www.bredentacademy.co.uk/courses/bredent-group-day/
Beim Scrollen, die Box mit Buchungsinformationen sollte die Seite mit dem Fenster nach unten scrollen, die auf Firefox, IE und Safari funktioniert gut, aber auf Chrome bleibt es oben nach oben (trotz des Inspektoren visuell die Box auslegen, wo es sein sollte).
Die Jquery, um die feste Klasse der Box hinzuzufügen, ist ziemlich einfach;
function fixScroll() {
if ($(document).scrollTop() > 295) {
$('.booking_box').addClass('fixed');
} else {
$('.booking_box').removeClass('fixed');
}
}
$(function() {
$(window).on('scroll', function() {
fixScroll();
});
});
Und die feste Klasse hat nur diese Deklarationen;
&.fixed {
float: left;
position: fixed !important;
top: 12px;
width: 340px;
@media #{$s1200} {
width: 274px;
}
@media #{$s992} {
position: inherit !important;
top: auto !important;
width: auto !important;
}
}
Die Box selbst sitzt nur in einer Bootstrap-Spalte.
Ich habe ein paar Fragen mit ähnlichen Problemen gesehen, kann aber keine Lösung finden und die ganze Sache verblüfft mich! Ich benutze Bootstrap, kann dort aber auch keine Konflikte sehen.
Wenn jemand erkennen kann, wo ich falsch liege, wäre ich sehr dankbar!
es gefunden - http://stackoverflow.com/questions/20708940/fixed-position-not-working-in-chrome –
Dank Paulie_D Von all den, die ich gesehen habe, habe ich das nicht gesehen, und um ehrlich zu sein, hatte ich nicht weit genug gesucht, um zu sehen, wie unzusammenhängende Elemente es hätten beeinflussen können. Ich muss herausfinden, warum diese Eigenschaft scheint, dieses Problem in Chrome, aber nicht in Safari zu verursachen! –