視差/背景位置特徵檢測

Question

好的，所以我創建了自己的parallaxing jQuery/JS腳本，但我不知道如何定位支持以下（需要以下）的瀏覽器：

• 支持背景位置

網站（預覽），我想這就是在轉型： My Test Site

我如何可以檢測瀏覽器是否支持，雖然這？ 我可以根據窗口寬度運行媒體查詢嗎？ 我必須瀏覽器嗅探嗎？ 我在WWW上看不到任何東西，它提供了有關如何爲此進行功能檢測的線索。

任何幫助將不勝感激。

我的JS代碼是在這裏：（請隨時使用它，如果你喜歡它）

var goTop = 0; 
var thisGoTop = 0; 
var thisHeight = 0; 
var thisWinH = 0; 
var bottomIntrusion = 0; 
var thisMax = 0; 
var bgPos = 0; 

function parallax(){ 

    goTop = $(window).scrollTop(); 
    thisWinH = $(window).height(); 

    $('div.para').each(function(){ 

     thisGoTop = $(this).offset().top; 
     thisHeight = $(this).height(); 
     thisMax = Math.floor(thisHeight * 0.3); 
     bottomIntrusion = (thisGoTop + (thisHeight/2) - goTop)/thisWinH; 

     if (bottomIntrusion > 0) { 
      bgPos = 0 - (Math.floor(thisMax * bottomIntrusion)); 
      $(this).css('background-position','center ' + bgPos + 'px'); 
     } 

    }); 

} 

parallax(); 

$(window).scroll(function(){ 

    parallax(); 

}); 

編輯： 我進去看了Modernizr的圖書館，我還沒有發現任何東西這給了我關於CSS3的背景位置變換支持的線索。我在這一點上越來越接近嗅探者，我不想去那裏。

Answer 1

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      var Compatibility = function() 
      { 
       var context = this; 

       context.TestObject = function(id) 
       { 
        function CreateObject(id) 
        { 
         $('body').prepend('<div id="CompatibilityTestObject_' + id + '"></div>'); 
        } 

        // Constructor 
        CreateObject(id); 

        return { 
         GetObject: function(id) 
         { 
          try 
          { 
           // Fetch with raw Javascript so if the javascript method does not exist it will throw an error 
           var fetchedDomElement = document.getElementById("CompatibilityTestObject_" + id); 
           return fetchedDomElement; 
          } 
          catch(e) 
          { 
           // Failed to fetch DOM Element 
           return false; 
          } 
         }, 
         DeleteObject: function(id) 
         { 
          try 
          { 
           $("#CompatibilityTestObject_" + id).remove(); 
           return true; 
          } 
          catch(e) 
          { 
           // Failed to remove object 
           return false; 
          } 
         } 
        } 
       } 

       context.Factory = function() 
       { 
        return { 
         CreateTestObject: function(id) 
         { 
          var m_TestObject = new context.TestObject(id); 
          return m_TestObject.GetObject(id); 
         }, 
         DeleteTestObject: function(id) 
         { 
          return context.DeleteObject(id); 
         } 
        } 
       }(); 

       var CSS = function() 
       { 
        return { 
         BackgroundPosition: function() 
         { 
          var testObject = context.Factory.CreateTestObject("BackgroundPosition"); 

          try 
          { 
           // My first try at testing for background positioning 
           testObject.style.backgroundPosition = "center"; 
           return true; 
          } 
          catch(e) 
          { 
           // Implement the handling of this error 
           //alert("Does not support backgroundPosition: " + e.message); 
           return false; 
          }                
         } 
        } 
       }(); 

       return { 
        CheckCSS: CSS 
       } 
      }(); 
     }); 
    </script> 

取上述腳本的副本...把它放在你的代碼中有，然後呼籲它就像這樣：

if(Compatibility.CheckCSS.BackgroundPostion()) 
{ 
    // Compatible browser 
} 
else 
{ 
    // Not compatible 
}