固定的CSS位置不適用於Chrome

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，但無法看到任何衝突。

如果有人能發現我要去的地方出錯，我會非常感激！

來源

2016-04-25 Carl Bembridge

找到它 - http://stackoverflow.com/questions/20708940/fixed-position-not-working-in-chrome –

感謝Paulie_D在我看過的所有那些中，我沒有看到那個，說實話，我沒有足夠的搜索來看看不相關的元素是如何影響它的。我需要研究爲什麼這個屬性似乎在Chrome中導致這個問題，但不是Safari！ –

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

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

刪除它。而你的固定塊將工作完全

來源

2016-04-25 11:34:20 Sharon

完美的工作謝謝你。有趣的是，該屬性是在移動設備上對菜單進行動畫製作的要求。我已經通過在小型screeb設備上應用webkit-perspective來實現它，所以現在一切正常。 –

固定的CSS位置不適用於Chrome

回答

相關問題