jquery - 修复了 CSS 位置在 Chrome 中不起作用的问题

Question

我有以下网页；

http://www.bredentacademy.co.uk/courses/bredent-group-day/

滚动时，带有预订信息的框会随着窗口一起向下滚动页面，这在 Firefox、IE 和 Safari 上运行良好，但在 Chrome 上它会保持在顶部(尽管检查员在视觉上将框放置在它的位置)应该是)。

将固定类添加到框中的 Jquery 非常简单；

function fixScroll() {
    if ($(document).scrollTop() > 295) {
        $('.booking_box').addClass('fixed');
    } else {
        $('.booking_box').removeClass('fixed');
    }
}
$(function() {
    $(window).on('scroll', function() {
        fixScroll();
    });
});

固定类只有这些声明；

    &.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;
        }               
    }   

盒子本身位于 Bootstrap 列内。

我见过几个有类似问题的问题，但找不到解决方案，整个事情让我感到困惑!我正在使用 Bootstrap，但也看不到任何冲突。

如果有人能发现我哪里出错了，我将非常感激!

Answer 1

您已在 .mobile_panel 中添加了 -webkit-perspective: 1000;。

.mobile_panel {        
    -webkit-perspective: 1000; //remove this
}

删除它..你的固定 block 将完美工作