jQuery檢查瀏覽器支持位置：固定

如何檢查瀏覽器是否支持使用jQuery的position:fixed。我認爲我必須使用$.support我認爲，但如何？jQuery檢查瀏覽器支持位置：固定

謝謝你的時間。

來源

2009-06-10 Alec Smart

如果你告訴我們爲什麼你需要這個，我們可能會給你一個解決方法，無論你在做什麼。 – 2009-06-10 05:53:21

我想檢測瀏覽器是否支持固定的，如果是的話很好，否則我會用一些醜陋的黑客來定位元素。 – 2009-06-10 05:56:44

最可靠的方法是實際進行功能測試。瀏覽器嗅探是脆弱和不可靠的。

我在CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED中有這樣的測試的例子。請注意，應在加載document.body之後運行測試。

來源

2009-06-29 20:22:51 kangax

如果讓這樣的代碼存在位置你可以檢查：

<html> 
<script type="text/javascript"> 
test = function() { 
if(!!document.getElementById("test").style.position) { 
alert('true'); 
} 
else{ 
alert('false'); 
} 
} 
</script> 

<body> 
<p id="test" onclick="test();" style="position:fixed;">Hi</p> 
</body> 
</html>

由於位置在所有主要的瀏覽器中存在，這將始終返回true。我想有沒有辦法來檢查可能的位置值，所以你必須檢查哪個瀏覽器和用戶正在查看你的頁面的版本，正如Paolo Bergantino所說。

來源

2009-06-10 21:42:32

position:fixed顯然適用於除身體在移動Safari瀏覽器（4.3.2）所有的塊級元素，所以CFT答案（http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED）應該有這個在它：

var isSupported = (container.scrollTop === 500 && elementTop === 100);

來源

2011-06-28 02:46:31 webXL

我發現移動Safari（尤其是OSX上的iOS模擬器iOS 4.2）拒絕滾動任何地方，除非你等待幾個毫秒。因此，誤報。

我寫了一個快速的jQuery插件來解決它：

(function($) { 
    $.support.fixedPosition = function (callback) { 
    setTimeout(
     function() { 
     var container = document.body; 
     if (document.createElement && container && container.appendChild && container.removeChild) { 
      var el = document.createElement('div'); 
      if (!el.getBoundingClientRect) return null; 
      el.innerHTML = 'x'; 
      el.style.cssText = 'position:fixed;top:100px;'; 
      container.appendChild(el); 
      var originalHeight = container.style.height, 
       originalScrollTop = container.scrollTop; 
      container.style.height = '3000px'; 
      container.scrollTop = 500; 
      var elementTop = el.getBoundingClientRect().top; 
      container.style.height = originalHeight; 
      var isSupported = !!(elementTop === 100); 
      container.removeChild(el); 
      container.scrollTop = originalScrollTop; 
      callback(isSupported); 
     } 
     else { 
      callback(null); 
     } 
     }, 
     20 
    ); 
    } 
})(jQuery);

來源

2011-07-08 12:08:19 user835325

的功能測試Position fixed support，如上所述，返回上的Opera Mini假陽性（它不支持位置：固定）。

來源

2013-06-24 00:55:46 loupiote

我已經創建了另一個檢查，如果position:fixed真的在瀏覽器中受支持。它創建固定的div並嘗試滾動並檢查div的位置是否改變。

function isPositionFixedSupported(){ 
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>"); 
    el.appendTo("body"); 

    var prevScrollTop = jQuery(document).scrollTop(); 
    var expectedResult = 1+prevScrollTop; 
    var scrollChanged = false; 

    //simulate scrolling 
    if (prevScrollTop === 0) { 
     window.scrollTo(0, 1); 
     expectedResult = 2; 
     scrollChanged = true; 
    } 

    //check position of div 
    suppoorted = (el.offset().top === expectedResult); 

    if (scrollChanged) { 
     window.scrollTo(0, prevScrollTop); 
    } 

    el.remove(); 

    return suppoorted; 
}

此功能已在Firefox 22，Chrome 28，IE 7-10，Android Browser 2.3中測試。

來源

2013-07-28 20:01:37 pulzarraider

function fixedcheck() { 
    var fixedDiv = $('<div>').css('position', 'fixed').appendTo('body'); 
    var pos1 = fixedDiv.offset().top; 
    $(window).scrollTop($(window).scrollTop() + 1); 
    var pos2 = fixedDiv.offset().top; 
    fixedDiv.remove(); 
    return (pos1 != pos2) 
} 

/* Usage */ 
$(document).ready(function() { 
    if (!fixedcheck()) alert('Your browser does not support fixed position!') 
});

來源

2017-01-07 05:49:54 Kavian

jQuery檢查瀏覽器支持位置：固定

回答

相關問題